事件處理程式

事件處理程式就是響應某個事件的函式，簡單地來說，就是函式。我們又把事件處理程式稱為事件偵聽器。事件處理程式是以「on「開頭的，比如點選事件的處理程式是」onclick「，事件處理程式大概由以下5種。

一、html事件處理程式

html事件處理程式，它是寫在html裡面的，是全域性作用域：

例子**--點選事件觸發alert函式
"alert('hello')
">

當我們需要使用乙個複雜的函式時，將js**寫在這裡面，顯然很不合適，所以有了下面這種寫法：

例子**--點選事件觸發dosomething()函式，這個函式寫在單獨的js檔案或

可以看到button.onclick這種形式，這裡事件程式作為了btn物件的方法，是區域性作用域。

所以我們可以用

btn.onclick = null;來刪除指定的事件處理程式。

如果我們嘗試給事件新增兩個事件，如：

"
btn">點選

輸出，hello again，很明顯，第乙個事件函式被第二個事件函式給覆蓋掉了，所以，dom0級事件處理程式不能新增多個，也不能控制事件流到底是捕獲還是冒泡。

三、dom2級事件處理程式（不支援ie）

進一步規範之後，有了dom2級事件處理程式，其中定義了兩個方法：

addeventlistener() 新增事件偵聽器

removeeventlistener() 刪除事件偵聽器

函式具有三個引數：

第乙個引數是要處理的事件名（不帶on字首的才是事件名）

第二個引數是作為事件處理程式的函式

第三個引數是乙個boolean值，預設false表示使用冒泡機制，true表示捕獲機制。

"
btn">點選

這時候兩個事件處理程式都能夠成功觸發，說明可以繫結多個事件處理程式，但是注意，如果是定義了一模一樣時監聽方法，是會發生覆蓋的，即同樣的事情和事件流機制下相同的方法只會觸發一次。

removeeventlister()方法幾乎和新增時用法一樣：

"
btn">點選

這樣的話，事件處理程式只會執行一次。

但是要注意，如果同乙個監聽事件分別為」事件捕獲「和」事件冒泡「註冊了一次，一共兩次，者兩次事件需要分別移除。兩者不會互相干擾。

這時候的this指向該元素的引用。

這裡事件觸發的順序時新增的順序。

四、ie事件處理程式

對於internet explorer來說，在ie9之前，你必須使用attachevent而不是使用標準方法addeventlistener。

ie事件處理程式中有類似與dom2級事件處理程式的兩個方法：

1.attachevent()

2.detachevent()

它們都接收兩個引數：

1.事件處理程式名稱。如onclick、onmouseover，注意：這裡不是事件，而是事件處理程式名稱，所以有on。

2.事件處理程式函式。

之所以沒有和dom2級事件處理程式中類似的第三個引數，是因為ie8及更早版本只支援冒泡事件流

"
btn">點選

這裡事件觸發的順序不是新增的順序而是新增順序的相反順序。

使用attachevent方法有個缺點，this的只會變成window物件的引用而不是觸發事件的元素。

五、跨瀏覽器的事件處理程式

為了相容ie瀏覽器和標準的瀏覽器，我們需要編寫通用的方法來處理：
var eventutil = 
else
if(element.attachevent) 
else
},removehandler: function (element, type, handler) 
else
if(element.detachevent) 
else}};

這一部分需要建立兩個方法：

addhandle（）--這個方法職責是視情況來使用dom0級、dom2級、ie事件處理程式來新增事件。

removehandler（）--這個方法就是移除使用addhandlert新增的事件。

這兩個方法接收相同的三個引數：

1. 要操作的元素--通過dom方法獲取

2.事件名稱--注意：沒有on，如」click「、」mouseover「

3.事件處理程式函式--對應的函式

使用：

"
btn">點選

事件物件事件物件是用來記錄一些事件發生時的相關資訊的物件，但事件物件只有發生時才會產生，並不只能是事件處理函式內部訪問，在所有事件處理函式執行結束後，事件物件就被銷毀。

一、屬性

"
btn">點選

二、方法

event物件主要有以下兩個方法，用於處理事件的傳播（冒泡、捕獲）和事件的取消。

stoppropagation()----冒泡機制下，阻止事件的進一步往上冒泡

btn1

">btn1

"content

">content

//這裡會輸出content，阻止了向content的冒泡

preventdefault()-----用於取消事件的預設操作，比如鏈結的跳轉或者表單的提交，主要是用來阻止標籤的預設行為

"
go" href="
">禁止跳轉
var go = document.getelementbyid('go'
);function gofn(
event
) go.addeventlistener(
'click
', gofn, false);

三、相容性

當然，事件物件也存在一定的相容性問題，在ie8及以前版本之中，通過設定屬性註冊事件處理程式時，呼叫的時候並未傳遞事件物件，需要通過全域性物件window.event來獲取。解決方法如下：

function getevent(event
)

在ie瀏覽器上面是event事件是沒有preventdefault()這個屬性的，所以在ie上，我們需要設定的屬性是returnvalue

window.event.returnvalue=false

stoppropagation()也是，所以需要設定cancelbubble，cancelbubble是ie事件物件的乙個屬性，設定這個屬性為true能阻止事件進一步傳播。

event.cancelbubble=true

事件委託事件委託就是利用事件冒泡，只指定乙個事件處理程式，就可以管理某一類的所有事件。

"
btnadd
">新增

結果是：新更新的html節點或者新新增html節點時，新新增的節點無法繫結事件，更新的節點也無法繫結事件，表現的行為是無法觸發事件。

其中一種解決方法是，新增子節點的時候，再次為其新增監聽事件

這也是問題所在：

1.首先我們多次操作dom獲取元素，這樣勢必會降低瀏覽器處理效能

2.事件不具有繼承性，如果我們動態在頁面中新增了乙個元素，那麼還需要重新走一遍上述程式為其新增監聽事件

那麼有沒有更好的方法呢？根據事件的冒泡原理，我們還可以實現另外乙個很重要的功能：事件委託。

我們只監聽最外層的元素，然後在事件函式中根據事件**進行不同的事件處理。這樣，我們新增事件監聽時只需要操作乙個元素，極大的降低了dom訪問，並且不用再給新增的元素新增監聽事件了，因為元素的事件會冒泡到最外層，被我們截獲。

得到

"
btnadd
">新增

這裡用父級ul做事件處理，當li被點選時，由於冒泡原理，事件就會冒泡到ul上，因為ul上有點選事件，所以事件就會被觸發，當然，這裡當點選ul的時候也會觸發的，所以要判斷點選的事件是不是li標籤元素。

event物件提供了乙個屬性叫target，可以返回事件的目標節點，

這裡用父級ul做事件處理，當li被點選時，由於冒泡原理，事件就會冒泡到ul上，因為ul上有點選事件，所以事件就會觸發，當然，這裡當點選ul的時候，也是會觸發的，所以要判斷點選的物件到底是不是li標籤元素。

event物件提供了乙個屬性叫target，可以返回事件的目標節點，我們成為事件源，也就是說，target就可以表示為當前的事件操作的dom，但是不是真正操作dom，當然，這個是有相容性的，標準瀏覽器用ev.target，ie瀏覽器用event.srcelement，此時只是獲取了當前節點的位置，並不知道是什麼節點名稱，這裡我們用nodename來獲取具體是什麼標籤名，這個返回的是乙個大寫的，我們需要轉成小寫再做比較（習慣問題）。

這樣，我們就實現了我們的事件委託，當然，不是所有的事件都是可以委託的。

適合用事件委託的事件：click，mousedown，mouseup，keydown，keyup，keypress。

當用事件委託的時候，根本就不需要去遍歷元素的子節點，只需要給父級元素新增事件就好了，新增加的節點也可以觸發事件效果。

參考：

事件處理程式

事件處理程式

JS事件事件處理程式之IE事件處理程式

JS事件程式處理

事件處理程式

事件處理程式

JS事件 事件處理程式之IE事件處理程式

JS事件程式處理

相關推薦

JS事件事件處理程式之IE事件處理程式