本文已参与「新人创作礼」活动，一起开启掘金创作之路

1. 什么是事件委托？

事件委托利用事件冒泡，可以只用一个事件处理程序来管理一种类型的事件。

可以理解为：
一些元素着绑定同一种类型的事件；
由于这些事件类型相同，将它们放到同一个元素下，即给它们创建一个父元素；
它们作为子元素，将这些事件类型的绑定，委托给父元素，自己就不绑定这些事件类型的监听；
利用事件冒泡的特性，子元素的事件冒泡到父元素，父元素监听到了这个事件，然后将相应的子元素找出来。

2. 事件委托的实现

由上文的介绍，我们可以知道，事件委托的原理就是利用事件冒泡的特性。

找到同一类型的事件，给它们的父元素（如果没有则自己创建）添加事件监听，以此来监听子元素的事件冒泡

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>事件委托</title>
</head>
<body>
    <ul id="list">
        <li id="first-list">first</li>
        <li id="second-list">second</li>
        <li id="third-list">third</li>
    </ul>
    <script>
        let myList = document.querySelector('#list');
        // 给父元素添加事件监听，这里监听 click 事件
        myList.addEventListener('click', () => {
        }, false);
    </script>
</body>
</html>

利用事件对象，使用 event.target 来定位触发事件的子元素

事件对象：在 DOM 中发生事件时，所有相关信息都会被收集并存储在一个名为 event 的对象中，这个对象就是事件对象。
event.target：事件目标（触发该事件的元素）

然后，我们来补全刚刚给父元素添加的事件监听函数

myList.addEventListener('click', (event) => {
    let target = event.target;
    
    switch(target.id) {
        case "first-list":
            console.log("You click the first list.");
            break;
        case "second-list":
            console.log("You click the second list.");
            break;
        case "third-list":
            console.log("You click the third list.");
            break;
    }
}, false);

这样，我们就实现了一个简单的事件委托。

3. 事件委托的优点

document 对象随时可用，任何时候都可以给它添加事件处理程序（只要页面渲染出可点击的元素，就可以无延迟地起作用）
节省花在设置页面处理程序的时间。只指定一个事件处理程序，既可以节省 DOM 内存引用，也可以节省时间
减少整个页面所需的内存，提升整体性能

JavaScript事件委托

1. 什么是事件委托 ？

2. 事件委托的实现

3. 事件委托的优点

1. 什么是事件委托？