让你学习DOM事件流
时间：2023-03-28 17:09:51
HTML
1。常用的事件绑定方法1.1对象属性绑定点我1.2addEventListener()绑定点击我addEventListener的第三个参数，布尔类型值，可以指定事件风险是否触发冒泡阶段或捕获阶段，true-捕获，false-冒泡，默认为false，均冒泡。1.3两种方法的区别对象属性绑定方法只能绑定一次，同一个事件类型可以重复绑定，前者会被后者覆盖。下面的代码中，“eventtrigger-1”不会被执行，会被下面的onclick覆盖，其实就是这种类似对象属性，相同的key，重新赋值会覆盖之前的值点击我*addEventListener没有重复绑定覆盖问题是同一元素可以多次绑定到同一事件类型。在下面的代码中，当按钮被点击时，事件将__依次触发__clickmeaddEventListener提供事件是否在捕获阶段或冒泡阶段触发2.事件流程2.1概念当一个事件发生时，它会按照特定的顺序在元素节点和根节点之间传播，路径经过的所有节点都会收到该事件。这个传播过程就是DOM事件流。2.2事件时序Clickme
2.2.1在捕获阶段，点击页面上的按钮，首先文档收到点击事件，然后沿着dom树依次往下走，直到实际事件触发元素，也就是按钮节点。这个过程称为事件捕获过程，是一个从外到内的传播过程。2.2.2目标阶段事件捕获阶段后，实际目标接收到事件，处于目标阶段2.2.3冒泡阶段从目标元素开始，沿着dom树，一步步往上传递，直到document对象下图是事件流模型记录为洋葱模型（先由外到内，再由内到外）。历史背景我就不说了。我将总结以下几点。默认情况下，浏览器以事件冒泡的形式传播事件。从内到外，事件流先由最外层的文档捕获到目标元素，再通过目标元素冒泡到文档。如果要触发捕获阶段事件，在上面介绍的方法addEventListener中将第三个参数设置为false即可。.防止事件冒泡3.1event.stopPropagation()有时父元素和它的子元素会绑定同一类型的事件。我们不希望事件向上传播。当触发哪个元素的事件时，将执行该元素的事件处理，不会干扰其他元素。元素事件。这时候需要防止事件冒泡的方法：event.stopPropagation()
clickme 上面代码中，不会触发root的点击事件.3.2stopPropagation和stopImmediatePropagation的区别是一样的，都可以防止事件冒泡。区别在于stopImmediatePropagation()防止事件冒泡，防止元素上相同事件类型的监听器被触发。比如stopPropagation只能简单的防止冒泡
