## 事件委托

事件委托，通俗地来讲，就是把一个元素响应事件（click、keydown......）的函数委托到另一个元素。

比如说有一个列表 ul，列表之中有大量的列表项 li：

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

当我们的鼠标移到Li上的时候，需要获取此Li的相关信息并飘出悬浮窗以显示详细信息，或者当某个Li被点击的时候需要触发相应的处理事件。我们通常的写法，是为每个Li都绑定类似onMouseOver或者onClick之类的事件监听：

```javascript
    //每个 li 中做的事情
    function addListeners4Li(liNode){
        liNode.onclick = function clickHandler(){...};
        liNode.onmouseover = function mouseOverHandler(){...}
    }

    window.onload = function(){
        var ulNode = document.getElementById("parent-list");
        var liNodes = ulNode.getElementByTagName("Li");
        for(var i=0, l = liNodes.length; i < l; i++){
            addListeners4Li(liNodes[i]);
        }
    }
```

但是，上面的做法会消耗内存和性能。

因此，比较好的方法就是把这个点击事件绑定到他的父层，也就是 `ul` 上，然后在执行事件的时候再去匹配判断目标元素。如下：

```javascript
    // 获取父节点，并为它注册click事件。 false 表示事件在冒泡阶段触发（默认）
    document.getElementById("parent-list").addEventListener("click", function (e) {
        // event.target 代表的是子元素。toUpperCase()方法 指的是转换为大写字母并返回
        if (e.target && e.target.nodeName.toUpperCase() == "LI") {
            // 真正的处理过程在这里
            console.log("List item ", e.target.id, " was clicked!");
        }
    }, false);

```


上方代码，为父节点注册click事件，当子节点被点击的时候，click事件会从子节点开始**向上冒泡**。**父节点捕获到事件**之后，开始执行方法体里的内容：通过判断 e.target 拿到了被点击的子节点li。从而可以获取到相应的信息，并作处理。

换而言之，事件是在父节点上注册的，参数为false，说明事件是在冒泡阶段触发（往上传递），那就只有父节点能拿到事件，子节点是不可能拿到事件的。

所以事件委托可以减少大量的内存消耗，提高效率。

事件委托的参考链接：

- [荐 | JavaScript事件代理和委托（Delegation）](https://www.cnblogs.com/owenChen/archive/2013/02/18/2915521.html)

- [JavaScript 事件委托详解](https://zhuanlan.zhihu.com/p/26536815)