JavaScript 事件委托/事件代理

简介

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

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

事件冒泡

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

使用

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

<!-- html页面 -->
<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);　　　　
        }　
    });
}

优缺点：

• 优点：
  1、节省内存占用，减少事件注册，提高性能。
  2、可以实现当新增子对象时无需再次对其绑定事件，对于动态内容部分尤为合适

• 缺点：事件代理的应用常用应该仅限于上述需求下，如果把所有事件都用代理就可能会出现事件误判，即本不应用触发事件的被绑上了事件。