JavaScript 事件委托或者事件代理介紹
本章節介紹一下標題標題中的事件委托這個概念和它的相關用法,代理也是一種叫法之一。
其實從名稱就可以看出事件委托其實就是自己的事情交給別人去干,下面就做一下介紹。
下面是一個li元素列表:
<ul id="list">
<li id="item1">實例一</li>
<li id="item2">實例二</li>
<li id="item3">實例三</li>
<li id="item4">實例四</li>
</ul>
如果我們要實現點擊li元素獲取當前li元素中的內容,我們可以為每一個li元素注冊onclick事件處理函數。
看代碼。
代碼:
window.onload=function(){
var ulNode=document.getElementById("list");
var liNodes=ulNode.childNodes||ulNode.children;
for(var index=0;index<liNodes.length;index++){
liNodes[index].addEventListener('click',function(e){
alert(e.target.innerHTML);
},false);
}
}
上面的代碼實現了我們的功能,但是缺點也是有的,假如不停的動態刪除或添加li,則就沒有那么靈活了,比如新添加的元素就沒有注冊事件處理函數,這個時候委托就可以派上用場了,下面就介紹一下它的實現原理。
事件階段:
當一個DOM事件被觸發的時候,它并不是只在它的起源對象上觸發一次,而是會經歷三個不同的階段。
簡而言之:事件一開始從文檔的根節點流向目標對象(捕獲階段),然后在目標對向上被觸發(目標階段),之后再回溯到文檔的根節點(冒泡階段)如圖所示:

事件捕獲階段(Capture Phase):
事件的第一個階段是捕獲階段。事件從文檔的根節點出發,隨著DOM樹的結構向事件的目標節點流去。
途中經過各個層次的DOM節點,并在各節點上觸發捕獲事件,直到到達時間的目標節點。捕獲階段的主要任務是簡歷傳播路徑,在冒泡階段,時間會通過這個路徑回溯到文檔根節點。
element.removeEventListener(<event-name>, <callback>, <use-capture>);
通過上面的這個函數來給節點設置監聽,可以通過將;設置成true來為事件的捕獲階段添加監聽回調函數。在實際應用中,我們并沒有太多使用捕獲階段監聽的用例,但是通過在捕獲階段對事件的處理,我們可以阻止類似click事件在某個特定元素上被觸發。
var form=document.querySeletor('form');
form.addEventListener('click',function(e){
e.stopPropagation();
},true);
如果對這種用法不是很了解的話,最好還是將設置為false或者undefined,從而在冒泡階段對事件進行監聽
目標階段(Target Phase):
當事件到達目標節點時,事件就進入了目標階段。事件在目標節點上被觸發,然后逆向回流,知道傳播到最外層的文檔節點。
對于多層嵌套的節點,鼠標和指針事件經常會被定位到最里層的元素上。假設,你在一個div元素上設置了click的監聽函數,而用戶點擊在了這個div元素內部的p元素上,那么p元素就是這個時間的目標元素。事件冒泡讓我們可以在這個div或者更上層的元素上監聽click事件,并且時間傳播過程中觸發回調函數。
冒泡階段(Bubble Phase):
事件在目標事件上觸發后,并不在這個元素上終止。它會隨著DOM樹一層層向上冒泡,直到到達最外層的根節點。也就是說,同一事件會一次在目標節點的父節點,父節點的父節點...直到最外層的節點上觸發。
絕大多數事件是會冒泡的,但并非所有的。具體可見:規范說明
由上可以想到,可以使用事件代理來實現對每一個li的監聽。代碼:
window.onload=function(){
var ulNode=document.getElementById("list");
ulNode.addEventListener('click',function(e){
if(e.target&&e.target.nodeName.toUpperCase()=="LI"){/*判斷目標事件是否為li*/
alert(e.target.innerHTML);
}
},false);
};
相關推薦
-
jquery實現的右鍵鼠標點擊事件
jqury其實本身的事件機制就很完善了,包括了單擊,雙擊,鼠標移入,鼠標移出等。但是卻少了一個做事件。就是鼠標右擊事件。當然大家也是直接用偵聽鼠標按下事件,然后通過if來判斷執行相應的函數。造成鼠標
-
js微信窗口關閉事件簡單代碼實例
下面就是一個簡單的演示代碼片段:WixinJSBridg.invok(closWindow,{},function(rs){ //lrt(rs.rr_msg); });Wixin
-
jquery注冊事件處理函數常用的幾種方式
本章節分享一下在jQury中常見的幾種注冊事件處理函數的方式。需要的朋友可以做一下參考,下面就以click事件為例子:第一種方式:$(documnt).rdy(function(){ $(
-
只有存在submit提交按鈕form的submit事件才會觸發
可能在實際編碼中遇到這樣的情況,為form元素注冊submit事件并不會被觸發。造成此種情況的一個很大可能就是因為form表單內沒有submit元素。代碼實例: htm
-
javascript什么是事件委托簡單介紹
本章節簡單介紹一下jvscrit中事件委托是什么。其實從名字就能看出它的大體意思來,所謂委托就是自己的事情交給其他人去干。事件委托利用事件冒泡來實現的,在子元素上發生的事件交由父元素來處理。比如















