javascript事件

一、事件綁定

javascript的事件綁定可以有多種方式

1.HTML事件處理程序

直接在HTML元素中，顯式地爲元素綁定事件：

<button onclick="func()"></button>

這種方式的移除事件的處理程序方式是，將事件函數置空。

func = function() {}

2.DOM0級處理事件程序

把一個函數賦值給事件處理函數。

element.onclick= function() {
    doSomething();
}

這種方式的移除事件程序是，將程序處理事件置位null;

element.onclick = null;

3.DOM2級事件處理程序

通過事件監聽的方式來綁定事件

element.addEventLisstener('click',function() {
    doSomething();
},false);

第一個參數爲綁定的事件名稱；第二個參數爲事件處理函數；第三個參數爲指定事件冒泡（false）還是事件捕獲（true），默認是false，即爲時間冒泡方式。
這種事件綁定的移出方式是remove

element.removeEventListener('click',function() {},false);

我們可以給一個元素添加多個事件處理程序，這些綁定的事件的執行順序與定義的順序一一對應。

4.IE的事件處理程序

IE有自己的事件綁定方式，與前面的事件監聽有所差異

element.attachEvent('onclick',function() {
    doSomething();
});

IE的事件綁定函數只有兩個參數，因爲在IE中，它只支持事件冒泡方式。還有，它的事件名前面都有加上一個’on’。
它的事件移出方式爲：

element.detachEvent('onclick',function() {
    doSomething();
});

二、事件捕獲和事件冒泡

1.事件捕獲

事件首先發生在DOM樹的最高層對象(document)，然後往事件觸發的發個元素一層層傳遞。如點擊a標籤：document –> html –> body –> a

2.事件冒泡

事件觸發的元素首先接收到事件，然後依次向上傳遞，直到最高層對象接收到事件。如：a –> body –> heml –> document

對於這兩種事件接收方式，如果希望只一次事件觸發，就能在整個DOM樹上都得到響應，那麼選擇用事件冒泡方式；如果只希望在目標元素中觸發事件，那麼就阻止事件冒泡（也不是所有事件都能冒泡，如blur、focus、load事件都不支持事件冒泡）。

3.阻止事件冒泡

阻止事件冒泡的方式有兩種：
w3c標準：event.stopPropagation（）；
IE中：event.cancelBubble();

三、事件委託

事件委託也稱事件代理是指：當事件被推到更上層的父節點時，通過檢查事件目標對象（target）來判斷並獲取事件源。
當我們需要給很多同級元素添加事件的時候，我們可以通過將事件綁定到它們的父節點上，從而將事件委託給父節點去出發事件處理函數。

• 給ul標籤下的li添加處理事件。

$ul.onclick = function(e) {
    if(e.target.id = "$li") {
        doSomething();
    } 
    if(e.target.class = "someli") {
        doSomething();
    }
}

這樣做的優點是：
1.管理的函數變少了，不需要爲每個元素都添加監聽函數
2.可以方便的添加和修改元素，不需要因爲元素的改動而修改事件綁定。新添加的子元素也在父節點中，只要給它們添加相同的標記就可以接收事件。
3.javascript和DOM節點之間的關聯變少了，這樣也就減少了因循環引用而帶來的內存泄漏問題。