事件触发后,从开始找目标元素,然后执行目标元素的事件,再到离开目标元素的整个过程称之为事
件流。
W3C标准浏览器事件流的传播分为3个阶段:捕获阶段、目标阶段、冒泡阶段
- 捕获阶段指找目标元素的过程,这个找的过程,是从最大的document对象到html,再到
body,。。。直到目标元素。
- 找到目标元素后,调用执行他绑定事件时对应的处理函数,这个过程被称之为目标阶段。
- 当目标元素的事件执行结束后,再从目标元素,到他的父元素。。。body、html再到document的
过程,是冒泡阶段。
我们可以将事件流比作人群中传递信息的方式。假设有一个人在人群中高喊一声:“看那边的烟花!”这个人是触发事件的源头,烟花是事件的目标。
事件冒泡:事件冒泡是一种事件传播的机制,就像人群中有人听到这个消息后,他们会把这个消息传递给身边的人,依次向外传播。在事件冒泡中,当一个元素上发生了某个事件(比如点击事件),该事件将会沿着 DOM 树向上冒泡,被父元素、祖先元素接收,并依次触发。
事件捕获:事件捕获是另一种事件传播的机制,它与事件冒泡相反。可以将事件捕获看作是人们从远处察觉到有人高喊了烟花的消息后,他们会快速向消息源头的方向靠拢以了解更多细节。在事件捕获中,事件从顶层元素开始,沿着 DOM 树向下传播,一直到触发事件的目标元素。
事件冒泡和事件捕获是事件流的两个阶段。在现代的浏览器中,事件流按照以下顺序进行传播:先是捕获阶段,从根元素向下传递到触发事件的目标元素,然后是冒泡阶段,从目标元素向上传递到根元素。
通过事件流的传播机制,我们可以很方便地对网页上的元素进行事件处理,捕获和冒泡阶段可以分别对应不同的事件处理逻辑,使得开发者能够更好地控制和处理事件。