事件冒泡和事件捕获

事件冒泡和捕获的作用

浏览器的事件冒泡机制和事件捕获机制是一个非常重要的概念,如果您不理解这个概念的话,它会让你感受到真正的痛苦.

事件冒泡和事件捕获是两种完全不同的机制,它们两个的主要作用是:

决定 在一系列相关元素上(祖先和后代这种关系),某一个元素触发一个事件后会导致所有其他的元素上的 同名事件(如果存在的话)也被触发从而调用每个元素上的事件处理函数的 顺序.

是的,在一系列相关元素上(祖先和后代这种关系)的任意一个元素*(除了根元素html)的某个事件的触发都会使其他元素上的同名事件也被触发(如果存在的话)*从而执行相关事件处理器.

这是一种默认的行为,幸运的是,你可以通过浏览器提供的某些API更改这种默认行为,使触发一个元素上的某个事件后,该事件不会传递给其他元素,如: stopPropagation()函数等.

当一个事件发生在具有父元素上的元素时,现在浏览器会存在两种阶段,使该事件触发——冒泡阶段和捕获阶段.

事件冒泡

事件冒泡是现代浏览器默认采用的事件触发机制.

• 事件冒泡: 当一个事件发生在具有父元素上的元素时,浏览器会先检查实际触发事件的元素是否有注册事件监听器,如果有,则执行对应的事件处理程序(函数),
• 然后移动到它的下一个直接父元素上,并做同样的事情,然后在移动到下一个,直到达到根元素html.

也就是说,默认情况下,如果浏览器执行的是冒泡阶段的事件,那么当一个元素上的事件被触发时,它的所有祖先元素上的同名事件将按照从内→外的顺序,也依次被触发.

即,执行的顺序大致为:

用户实际点击的元素 -> 父元素 -> 祖先元素… -> body -> html根元素

事件捕获

什么是事件捕获?

事件捕获机制和事件冒泡机制是完全相反的机制.

浏览器要在事件捕获机制下执行事件对应的处理程序,需要开发者自行打开,因为它不是现代浏览器的默认设置.

• 事件捕获: 当一个事件发生在具有父元素上的元素时,浏览器会先检查元素的最外层祖先:根元素html, 查看它是否在捕获阶段注册了被触发事件的事件处理程序(函数),如果有,则执行它.

• 然后移动到实际触发事件元素的下一个祖先元素(倒数第二祖先元素,通常来说是body元素),并执行相同的操作,然后再移动下一个元素…

  以此类推,直到到达实际出发事件的元素.

也就是说,在默认情况下,如果浏览器执行的是捕获阶段的事件,那么当一个元素上的事件被触发时,它的所有祖先元素上的同名事件将按照从外→内的顺序,也依次被触发.
即,执行的顺序大致为:html -> body -> 父元素 -> 子项 ->…->直到用户实际点击的元素