淺談js事件監聽

1、在談事件監聽之前,先來了解一下什麽是js事件?

大家都知道js是一種動態數據類型的語言, 可以使我們在原有的靜態頁面上實現一些動態的效果；當網頁中的某個元素產生可以觸發js代碼(函數)實現js動態效果的行為,我理解為js事件。

2、事件的組成部分：事件源 . 事件類型 = 預處理函數

事件源：真正觸發事件的那個元素；

事件類型 : 例:onmousemove 、onmouseover等；

預處理函數：function ( ){ }；

3、事件監聽：

事件分為DOM 0級事件和Dom 2級事件，DOM2級事件也叫做事件監聽。DOM 0級事件的缺點是如果事件相同, 後者的事件會覆蓋前者的事件，DOM2級事件可以為同一個對象的同一個事件綁定多個事件處理程序,且前者事件不會被覆蓋。

DOM2級事件的方法是：

addEventListener()

參數1：事件類型 不需要加on

參數2：回調函數

參數3：布爾值 true代表捕獲 false代表冒泡

解綁事件方法：removeEventListener()

但是IE不支持此方法

IE瀏覽器下用：attachEvent()

參數1：事件類型 需要加on

參數2：回調函數

解綁事件方法：detachEvent()

4、事件流、事件冒泡、事件捕獲

事件流： 當一個HTML元素產生一個事件時,該事件會在元素節點與根節點之間的路徑傳播，路徑所經過的節點都會收到該事件，這個傳播的過程叫做DOM事件流。

簡單說：元素觸發事件時，事件的傳播過程稱為事件流，過程分為捕獲和冒泡。

冒泡事件：由微軟提出的，事件由子元素傳遞到父元素的過程，叫做事件冒泡；

捕獲事件：網景提出的 事件由父元素到子元素傳遞的過程，叫做事件捕獲；

5、瀏覽器事件默認執行並傳播的順序

冒泡過程：目標元素 ——>......... ——>body ——>html ——>document;

例:

html結構及css樣式

Js代碼:

捕獲過程 : document——>html——>body......... ——>目標元素;

例:html結構及css樣式還是引用上面的

當冒泡事件和捕獲事件同時發生時,先執行事件捕獲,到最底層的時候順序執行(常見面試題)

例:

document---捕獲 body----捕獲 big----捕獲 small--冒泡 small----捕獲 big---冒泡 body----冒泡 document---冒泡

事件冒泡的好處：可以利用事件冒泡的原理，將子級的事件委托給父級元素監聽，減少事件的綁定

6、事件代理（事件委托）

利用冒泡機制，將子元素的事件委托給父元素去監聽(給父元素添加事件)，當子元素觸發事件時，事件冒泡到父級;如果希望指定的子元素才能觸發事件，可以通過事件對象(event)獲得事件源(target)，然後通過條件判斷是不是期望的子元素，如果是的話，執行事件，否則不執行

獲取事件源的方法： var target = e.target||e.srcElement

事件代理的好處:

1、實現對未來元素事件的綁定

2、減少事件綁定，提高性能

例：

html結構:

Css樣式:

Jss代碼:

上述例子中,將子級aLi的事件onclick委托給父元素oList進行監聽,通過事件對象獲取到事件源onclick,當子元素aLi觸發時,就會執行相應的代碼;

當再克隆添加一個新的li元素時,也會對這個新元素進行事件綁定,無需再重新對其進行事件綁定。

淺談js事件監聽