事件捕获和事件冒泡

事件

事件是在系统内发生的动作或者发生的事情，系统响应事件后，可以用某种方式对事件做出回应

事件冒泡

• 浏览器检查实际点击的元素是否在冒泡阶段中注册一个onclick事件处理程序，如果是，则运行它
• 然后移动到下一个直接的祖先元素，并做同样的事情，然后是下一个，等等，直到元素

事件捕获

• 浏览器检查元素的最外层祖先,是否在捕获阶段中注册一个onclick事件处理程序，如果是，则运行它
• 然后，它移动到中单击元素的下一个祖先元素，并执行相同的操作，然后是单击元素再下一个祖先元素，以此类推，直到到达实际点击的元素

通过addEventListener第三个参数控制，true代表捕获阶段执行，false代表冒泡阶段执行

过程图

从过程图中可以看到，捕获过程是优于冒泡执行的，通过代码测试验证也是如此

实际应用

补充一个知识点：

event.currentTarget：标识是当事件沿着DOM触发时事件的当前目标，它总是指向事件绑定的元素 event.target：事件触发的元素

拿事件冒泡来举例，event.target总是指向最里面触发事件的元素，event.currentTarget指向冒泡向上每一级执行绑定方法的元素

事件代理

当有很多子级div需要绑定事件时如果子级较多，每个子级分别绑定事件时，性能会很差，这时候，就需要使用冒泡模式，在父级绑定事件，在点击子级时候，通过冒泡法，获取到target

我们给father,grand_father分别绑定了onclick事件，当点击son时，冒泡执行到father,可以通过target获取到son的dom对象

grand_father.addEventListener(
        "click",
        (e) => {
          console.log("grand_father click 冒泡", e.currentTarget, e.target);
        },
        false
      );

      father.addEventListener(
        "click",
        (e) => {
          console.log("father click 冒泡", e.currentTarget, e.target);
        },
        false
      );

可以通过控制台发现event.target指向son这个dom元素