掘金文章链接：DOM事件流 - 掘金 简书文章链接：DOM事件流 - 简书1. 常用事件绑定方式1.1 对象属性绑定 1.2 addEventListener()绑定 addEventListener 第三个参数，Boolean 类型值，可指定事件冒泡阶段还是捕获阶段触发，true -捕获，false -冒泡，默认false ，既冒泡。1.3 两种方式区别对象属性绑定方式只能绑定一次，重复绑定同一事件类型，前面的会被后面的覆盖 下面代码中，＂事件触发-1＂不会执行了，被下面的 onclick 覆盖了 其实这种类似对象属性，同一个key，重新赋值会覆盖前面的值 addEventListener 没有重复绑定覆盖的问题，同一元素可以绑定同一事件类型多次 下面代码中，按钮点击时，事件会 依次触发 addEventListener 提供事件是在捕获阶段还是在冒泡阶段触发2. 事件流2.1 概念 事件发生时会在元素节点与根节点之间按照特定的顺序传播，路径所经过的所有节点都会收到该事件，这个传播过程即DOM 事件流。2.2 事件顺序 2.2.1 捕获阶段 在页面中点击button ，首先document 接收到click 事件，然后沿着dom 树，依次向下，直到实际事件触发元素，既button 节点，这一过程称为事件捕获过程，是从外到内的传播过程。2.2.2 目标阶段 经过事件捕获阶段后，然后是实际目标接收到事件即处于目标阶段2.2.3 冒泡阶段 从目标元素，沿着dom 树，逐级向上传递，直到document 对象 下图是事件流模型，记为 洋葱模型 (先外到内，再内到外) 历史背景不讲了，总结以下几点默认情况下浏览器以事件冒泡形式进行事件传播一刀插过洋葱，先外到内，再内到外，既事件流先由最外层document 捕获到目标元素，再经目标元素冒泡到document 如果要触发捕获阶段事件，在上面介绍的方法addEventListener 设置第三个参数为false 即可3. 阻止事件冒泡3.1 event.stopPropagation() 有时父元素和其子元素都绑定了同一类型事件，我们不想让事件向上传播，触发哪个元素的事件，就执行哪个元素的事件处理，不干扰其他元素事件。 这时就需要阻止事件冒泡 方法： event.stopPropagation() 上面的代码中，root 的click 事件不会触发了。3.2 stopPropagation与stopImmediatePropagation区别 相同点 都能阻止事件冒泡 不同点 stopImmediatePropagation() 阻止事件冒泡并且阻止该元素上同事件类型的监听器被触发 举例stopPropagation 只能单纯的阻止冒泡 stopImmediatePropagation 阻止后面同类型事件触发 注意 stopImmediatePropagation ，只能阻止后面 事件不触发 下面代码中，只有＂btn-事件触发3＂不执行 4. 事件流实战 完 如有错误，请指正，欢迎评论交流，关注我，只写干货
