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

事件流

事件流分为三个阶段：事件捕获、事件目标、事件冒泡;

优先级：先捕获，再冒泡。

事件冒泡

定义：当触发子元素的事件时，子元素的所有“父级元素” 的“同名事件”会依次触发 ；

如图点击蓝色子盒子，会依次触发父元素：子元素 -> 父元素 -> body -> html -> document -> window

阻止冒泡：

2.1）w3c 方法是：event.stopPropagation(); 事件处理过程中，阻止冒泡事件，但不会阻止默

认行为（跳转至超链接）;

2.2）IE 则是使用 event.cancelBubble = true 阻止事件冒泡

事件捕获

定义：当触发子元素事件时，先从最顶级父元素，一级一级往里触发；

如下图所示，其与冒泡事件正好相反，点击蓝色子盒子，会先从父元素开始触发： window -> document -> html -> body -> 父元素 -> 子元素

只有唯一的一种语法可以注册捕获事件：addEventListener() ： 第三个参数为true

元素.addEventListener(
        'click',
        function () {
          alert('我是子元素')
        },
        true
      ) //捕获