JavaScript 事件委托/事件代理

2019-11-02 18:28:13

字体：大中小

来源：转载

供稿：网友

简介

根据几个概念了解 javaScript 事件委托：

事件(event)：这是一个抽象的概念。定义一个对象在特定状态下所执行的动作。（自己定义的，网上找不到比较理想的定义。如果谁有更好的定义方式请留言。）例如：onclick事件、onmouSEOver事件、onmouseout事件等。委托(delegate)：请求别人帮自己做事。例子： 情况一：A、B、C三人在一家公司。周一他们需要取快递（绑定事件 - 取快递），快递送到了公司（触发事件）。他们三人都出去取快递了（执行操作）。情况二：他们三人都委托前台帮忙代签（委托事件）。快递统一由前台代签。这样即使来了新同事D，同样也可以收到快递（执行操作）。Javascript 事件委托：又称为事件代理。利用事件冒泡，只指定一个事件处理程序，就可以管理某一类型的所有事件。

事件冒泡

事件捕获：当某个元素触发某个事件（如onclick），顶层对象document就会发出一个事件流，随着DOM树的节点向目标元素节点流去，直到到达事件真正发生的目标元素。在这个过程中，事件相应的监听函数是不会被触发的。事件冒泡：事件捕获到达目标函数之后，执行目标元素该事件相应的处理函数。如果没有绑定监听函数，那就不执行。开始从目标元素开始，往顶层元素传播。途中如果有节点绑定了相应的事件处理函数，这些函数都会被依次触发。如果想阻止事件起泡，可以使用 e.stopPRopagation()（Firefox）或者e.cancelBubble=true（IE）来组织事件的冒泡传播。

使用

如下：在父类中添加click事件，当点击子类的时候通过冒泡原理触发父类事件。

<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);　　　　 }　 });}