JavaScript 事件委托/事件代理

2024-04-27 15:16:25

字體：大中小

來源：轉載

供稿：網友

簡介

根據幾個概念了解 javaScript 事件委托：

事件(event)：這是一個抽象的概念。定義一個對象在特定狀態(tài)下所執(zhí)行的動作。（自己定義的，網上找不到比較理想的定義。如果誰有更好的定義方式請留言。）例如：onclick事件、onmouSEOver事件、onmouseout事件等。委托(delegate)：請求別人幫自己做事。例子： 情況一：A、B、C三人在一家公司。周一他們需要取快遞（綁定事件 - 取快遞），快遞送到了公司（觸發(fā)事件）。他們三人都出去取快遞了（執(zhí)行操作）。情況二：他們三人都委托前臺幫忙代簽（委托事件）。快遞統一由前臺代簽。這樣即使來了新同事D，同樣也可以收到快遞（執(zhí)行操作）。Javascript 事件委托：又稱為事件代理。利用事件冒泡，只指定一個事件處理程序，就可以管理某一類型的所有事件。

事件冒泡

事件捕獲：當某個元素觸發(fā)某個事件（如onclick），頂層對象document就會發(fā)出一個事件流，隨著DOM樹的節(jié)點向目標元素節(jié)點流去，直到到達事件真正發(fā)生的目標元素。在這個過程中，事件相應的監(jiān)聽函數是不會被觸發(fā)的。事件冒泡：事件捕獲到達目標函數之后，執(zhí)行目標元素該事件相應的處理函數。如果沒有綁定監(jiān)聽函數，那就不執(zhí)行。開始從目標元素開始，往頂層元素傳播。途中如果有節(jié)點綁定了相應的事件處理函數，這些函數都會被依次觸發(fā)。如果想阻止事件起泡，可以使用 e.stopPRopagation()（Firefox）或者e.cancelBubble=true（IE）來組織事件的冒泡傳播。

使用

如下：在父類中添加click事件，當點擊子類的時候通過冒泡原理觸發(fā)父類事件。

<ul id="parent-list"> <li>Item 1</li> <li>Item 2</li> <li>Item 3</li> <li>Item 4</li></ul>JQuery： // delegate 的方法需要三個參數，一個選擇器，一個事件名稱，和事件處理函數$("#parent-list").delegate("li", "click", function(){ if (this.nodeName.toLowerCase() == 'li') { alert(this.innerHTML); }});$("#parent-list").bind('click', function(e) { var el = e.target; if (el.nodeName.toLowerCase() == 'li') { alert(el.innerHTML); }});$("#parent-list").click(function(e) { var el = e.target; if (el.nodeName.toLowerCase() == 'li') { alert(el.innerHTML); }});JavaScript：window.onload = function() {　　 var oUl = document.getElementById("parent-list"); oUl.onclick = function(ev) {　　　　 var ev = ev || window.event;　　　　 var target = ev.target || ev.srcElement;　　　 if (target.nodeName.toLowerCase() == 'li') { alert(target.innerHTML);　　　　 }　　 }}// addEventListener() 方法用于向指定元素添加事件句柄。window.onload = function() {　　 var oUl = document.getElementById("parent-list"); oUl.addEventListener('click', function() { var ev = ev || window.event;　　　　 var target = ev.target || ev.srcElement; if (target.nodeName.toLowerCase() == 'li') {　 alert(target.innerHTML);　　　　 }　 });}