BOM和DOM操作 - Day2 -事件委托

6. 事件委托（代理、委派）

事件冒泡本身的特性，会带来的坏处，也会带来的好处，需要我们灵活掌握。生活中有如下场景：

咱们班有100个学生， 快递员有100个快递， 如果一个个的送花费时间较长。同时每个学生领取的时候，也需要排队领取，也花费时间较长，何如？

解决方案：

快递员把100个快递，委托给班主任，班主任把这些快递放到办公室，同学们下课自行领取即可。

优势：

快递员省事，委托给班主任就可以走了。 同学们领取也方便，因为相信班主任。

事件冒泡本身的特性，会带来的坏处，也会带来的好处，需要我们灵活掌握。程序中也有如此场景：

<ul>
    <li>知否知否，应该有弹框在手</li>
    <li>知否知否，应该有弹框在手</li>
    <li>知否知否，应该有弹框在手</li>
    <li>知否知否，应该有弹框在手</li>
    <li>知否知否，应该有弹框在手</li>
</ul>

点击每个li 都会弹出对话框，以前需要给每个 li 注册事件，是非常辛苦的，而且访问 DOM 的次数越多，这就会延长整个页面的交互就绪时间。

事件委托

事件委托也称为事件代理， 在jQuery 里面称为事件委派。

事件委托的原理

不是每个子节点单独设置事件监听器，而是事件监听器设置在其父节点上，然后利用冒泡原理影响设置每个子节点。
以上案例：给 ul 注册点击事件，然后利用事件对象的 target来找到当前点击的 li，因为点击li，事件会冒泡到 ul上，ul 有注册事件，就会触发事件监听器。

事件委托的作用

我们只操作了一次 DOM ，提高了程序的性能。

示例

// 改变 li 的背景颜色
var ul = document.querySelector('ul');
ul.addEventListener('click', function(e){
    // e.target 可以得到我们点击的对象
    e.target.style.backgroundColor = 'pink';
})