給元素註冊事件時,事件函式中不能使用全域性變數

2022-10-11 17:21:11 字數 944 閱讀 1853

最近在做專案的過程中,遇到這樣的需求(為了便於說明,我對源需求進行了簡化):需要通過js建立新的file元素,並要對新建的元素註冊事件和新增屬性。(註冊的事件是用來在客戶端驗證上傳的檔案的大小和格式的)。

在上面的註冊onchange事件**中,為什麼紅色標明的部分不正確,而綠色標明部分正確呢!

原因是在js中給新建立的元素註冊事件時,註冊的事件函式並不會在註冊的時候就會被元素載入的,而是在元素的註冊事件被觸發的時候才載入,即執行事件定義的方法;但元素設定的屬性,卻會在元素定義之後立即被載入。大家可以通過在ie中用除錯工具(或火狐的firebug)檢視建立的元素的**;**中並不會顯示事件。

所以,如果大家以紅色的**註冊事件。當觸發onchange事件時,註冊函式中定義的變數id的值並不是當時註冊的時候的全域性變數的值;而是全域性變數的當前值。要想讓id的值重現全域性變數重現當時註冊時候的值,就應該使用綠色標明部分的**。

說了這麼多,也不知道我說明白了沒有。下面我就給一簡單的完整的例子——這樣也算是對我上面說的一種解釋吧。下面的**相容ie和火狐,其中藍色標明部分的**,請根據自己的瀏覽器注釋掉不需要的部分。簡單介紹下面的這段**的作用:該段**可以建立多個上傳檔案的file元素,在每個建立的file元素都註冊乙個onchange事件,用於驗證上傳的格式是否是.jpg或.gif或.png格式的。

大家可以直接把上面的**拷到本地執行!(如果在註冊onchange事件的時候不是textfiled3_pic.addeventlistener("change", function(), false);    

而是使用全域性變數textfiled3_pic.addeventlistener("change", function(), false);  

則用新建立的file元件上傳,不能正確的驗證上傳的格式,即使你上傳的格式正確,也會提示你格式錯了!大家可以試試!

)另:在註冊事件中使用關鍵字this也將不起作用,而是會把它當做普通的字串!

jquery給動態元素繫結事件

在jquery中,我們經常使用 elem bind event,function 這種方式給元素繫結事件。在大部分情況下這種寫法無疑是適用的。然而,當頁面上原本不存在某些如button,select等元素,而是後期通過動態建立的方式建立出來的控制項,這種寫法,便不再適用了。selector on e...

給元素新增事件的方法

新增html元素的事件 1.通過html元素屬性 簡單說來就是在html結構中,給你要新增事件的元素新增乙個屬性。屬性名為 on 事件名。如 你要給a元素繫結乙個click事件,你就該這麼寫 nclick do something name 2.通過物件屬性 物件指的是jdom樹里的物件,我們都知道...

元素相關的方法和註冊事件和移除事件

今天學習了註冊事件和移除事件的3種方式 1.addeventlistener event,fn,false 這個ie8不相容 2.attachevetnt event,fn 這個只能ie8用 移除事件 1.removeeventlistener event,fn,false 這個ie8不相容 2de...