0. 本文组织架构

DOM事件机制
DOM事件委托

1. DOM事件机制

事件是什么？事件即在编程时系统内发生的动作或者发生的事情。既然看到这篇文章的大多都是复习前端知识的小伙伴们，那我就以浏览网页举例。例如，点击网页某个按钮、在输入框里输入一些东西等，都属于事件。当这些事件发生时，我们需要JS执行哪些操作？这，就是我们在JS中所表达的事件了。

那么什么是事件机制？先扯点别的。既然都学过DOM是什么，那么我们便都知道，DOM模型即是建立在“HTML是一棵树”的思维上。既然是树模型，那么必然有根节点、子节点这一说。那么有一个问题，如果为子节点绑定了一个事件，那么它会不会传导到根节点？如果会，以何种方式传导？

答案是会传导，传导的方式有两种：事件冒泡和事件捕获^[1]^[2]。按照树型模型的话，事件冒泡是子传父，事件捕获是父传子。

难以理解？那么用望文生义的方法来理解。假设事件是一条沉在水底的鱼，鱼向水面吐泡泡的过程就是事件冒泡，那么人用渔网将鱼从水底捞上来的过程就是事件捕获。

事件执行的阶段是：捕获到冒泡，先上再下，即孔融让梨--先爸爸再儿子。

在JS中，我们可以使用addEventListener(event, fn, isCaptured)来为元素进行事件绑定。该方法默认接受三个参数：

event：String类型。被监听的事件，需要用的时候去MDN查即可。
fn：Function类型。当事件event发生时，执行fn的操作。
isCaptured：boolean类型，默认值为false。所以当该参数未传入或传false之时，执行事件冒泡。当第三参数为true时，执行事件捕获。

事件捕获无法取消，但事件冒泡可以，使用e.stopPropagation()即可。

2. 事件委托

一句话：当一父带多子，而需要儿子们设置监听事件时，不需要每个子节点都单独设置事件监听器，而是将监听器设置到父节点上，利用事件冒泡原理影响每个子节点。

代码示例：

<body>
    <ul id="beauty">
        <li>薛凯琪</li>
        <li>刘亦菲</li>
        <li>王冰冰</li>
        <li>小黄花</li>
    </ul>
    
    <script>
         let ul = document.getElementById('beauty');
         // 只需要在父元素添加事件监听函数即可
         ul.addEventListener('click', (e) => {
             alert('想让她成为你女朋友？做梦!');
             e.target.backgroundColor = 'green';
         });
    </script>
</body>

DOM事件与事件委托

0. 本文组织架构

1. DOM事件机制

2. 事件委托

参考