强大的js事件委托

什么是事件

可以这样认为，我们在网页中的某个操作就是事件(有的操作对应多个事件)，例如:当我们点击一个按钮的时候，就触发了onclick事件

比如onload事件等等

下边是一个简单添加点击事件的例子

element.addEventListener("click", function() {
       //操作
});
           

addEventListener() 方法用于向指定元素添加事件句柄，使用 removeEventListener() 方法来移除 addEventListener() 方法添加的事件句柄。含有三个参数，一个是事件名称，另一个是事件执行的函数，最后一个是事件捕获，因为IE不支持此方法所以，IE 中为 attachEvent（）

最简单的添加事件的方法是：

element.onclick = function() {
   // 操作
};
           

事件冒泡和事件捕获

事件冒泡

事件按照从最特定的事件目标到最不特定的事件目标(document对象)的顺序触发。

IE 5.5: div -> body -> document

IE 6.0: div -> body -> html -> document

Mozilla 1.0: div -> body -> html -> document -> window

事件从事件目标(target)开始，往上冒泡直到页面的最上一级标签。

事件捕获

事件从最不精确的对象(document 对象)开始触发，然后到最精确，和事件冒泡相反，事件从最上一级标签开始往下查找，直到捕获到事件目标(target)。

事件流

同时支持两种事件模型：捕获型事件和冒泡型事件，但是，捕获型事件先发生。两种事件流会触及DOM中的所有对象，从document对象开始，也在document对象结束。

事件委托

事件委托就是利用冒泡的原理，把事件加到父级上，触发执行效果。用事件委托可以提高性能

使用事件委托技术能让你避免对特定的每个节点添加事件监听器；相反，事件监听器是被添加到它们的父元素上。事件监听器会分析从子元素冒泡上来的事件，找到是哪个子元素的事件。

假设我们给ul元素里的li添加事件

<ul id="parent-list">
    <li id="post-1">Item 1</li>
    <li id="post-2">Item 2</li>
    <li id="post-3">Item 3</li>
    <li id="post-4">Item 4</li>
    <li id="post-5">Item 5</li>
    <li id="post-6">Item 6</li>
</ul>
           

当li被点击的时候，我们要精确的知道是哪个li点击的，在不会事件委托的时候我们可能根据每个li的id去获取对象然后绑定事件，然而每当添加新的li的时候，又得重新给添加的绑定事件，显得非常麻烦

下面是事件委托的例子

// 找到父元素，添加监听器...
    document.getElementById("parent-list").addEventListener("click",function(e) {
    // e.target是被点击的元素!
    // 如果被点击的是li元素
    if(e.target && e.target.nodeName == "LI") {
        // 找到目标，输出
        console.log("List item ",e.target);
    }
})
           

我们先获取父元素对象，然后给父元素绑定事件，当事件监听器触发时，检查事件的来源，排除了不是li元素的事件，如果点击的是li元素，则输出此元素的对象，这短短几行代码，比一个个添加事件灵活多了，所以事件委托非常强大，希望大家多多使用。