事件冒泡 事件監聽 事件委託 事件綁定 事件代理

前言：js是事件驅動語言

1、事件驅動
    1.事件
      javascript偵測到的用戶的操做或是頁面的一些行爲(怎麼發生的)
    2.事件源
      引起事件的元素。(發生在誰的身上)
    2.事件處理程序
      對事件處理的程序或是函數 (發生了什麼事)

2、事件的分類

　　鼠標事件。鍵盤事件、表單事件、頁面事件、DOM事件等等

3、事件的綁定方法

     1.直接在HTML元素綁定，在標籤後加onclick=function(){}等

　  2.在js腳本中綁定，獲取元素後綁定事件

　  3.DOM綁定，添加事件監聽

　　　　第一種沒法刪除，很差維護

　　　　第二種也沒法刪除，維護性通常

　　　　第三種能夠刪除，維護性通常

 

1.事件冒泡

在相似 body > div > a 這樣的結構中，若是單擊a元素，click事件會從a一直冒泡到div和body（即document對象）。所以，發生在a上面的單擊事件，div和body元素一樣能夠處理

利用冒泡的原理，把事件添加到父級上，父級也會有這個方法來執行觸發效果

 　　(1) 當同一個對象使用.onclick的寫法觸發多個方法的時候，後一個方法會把前一個方法覆蓋掉，也就是說，在對象的onclick事件發生時，只會執行最後綁定的方法

　　

2.事件監聽

　　(1)原生實現事件監聽，兼容IE、ff、chrome、另attachEvent是IE專有屬性

　　我的的理解：

　　通常狀況下是不須要捕獲的，事件捕獲是把整個操做系統裏全部的當前發生的事件都綁定上這裏

　　若是綁定的是一個匿名函數則沒法解除綁定，由於函數是一個new出來的對象，不一樣的匿名函數不是同一個對象，固然這個也是事件綁定的好處

　　 添加事件監聽

1 function addHandler(obj,type,handler) {
2     if ( obj.addEventListener ) {
3         obj.addEventListener ( type, handler, false );
4     } else if ( obj.attachEvent ) {
5         obj.attachEvent ( "on" + type, handler );
6     } else {
7         obj["on" + type] = handler;
8     }
9 }

 　　移除事件監聽

1 function removeHandler(obj,type,handler) {
2     if ( obj.removeEventListener ) {
3         obj.removeEventListener ( type, handler, false );
4     } else if ( obj.detachEvent ) {
5         obj.detachEvent ( "on" + type, handler );
6     } else {
7         obj["on" + type] = null;
8     }
9 }

（2）jquery實現事件監聽

 

3.事件委託

利用事件傳播（這裏是冒泡）這個機制，就能夠實現事件委託。具體來講，事件委託就是事件目標自身不處理事件，而是把處理任務委託給其父元素或者祖先元素，甚至根元素（document）

　　(1)jQuery的 bind() 方法，使用.bind()方法只會給第一頁中的50個單元格綁定單擊事件，動態加載的後續頁面中的單元格都不會有這個單擊事件。換句話說，.bind()只能給調用它的時候已經存在的元素綁定事件，不能給將來新增的元素綁定事件

　　(2)jQuery的 live()方法，這裏的.live()方法會把click事件綁定到$(document)對象（但這一點從代碼中體現不出來，這也是.live()方法飽受詬病的一個重要緣由，稍後再詳細討論），並且只須要給$(document)綁定一次（不是50次，更不是5000次），而後就可以處理後續動態加載的照片單元格的單擊事件。在接收到任何事件時，$(document)對象都會檢查事件類型和事件目標，若是是click事件且事件目標是td，那麼就執行委託給它的處理程序