当前位置:Gxlcms > html代码 > 关于DOM事件流的三个阶段_html/css_WEB-ITnose

关于DOM事件流的三个阶段_html/css_WEB-ITnose

时间:2021-07-01 10:21:17 帮助过:3人阅读

一丶 流

什么是流?

比如 react 中的单项数据流,Node.js 中的流,或者本文中的 DOM 事件流,都是流的具体体现。专业地讲,流是程序输入或输出的一个连续的字节序列;通俗地讲,流是有方向的数据。

二丶 事件流

什么是事件流?

假想一下,现在有一组同心圆,你把手指在最里面的圆心上,与此同时,你也正在指着外层的其他同心圆。假设最里面的圆是 DOM 中的一个按钮,那就是说,你点击按钮这个元素的同时,也点击了他的所有父级元素。那么这个点击事件 DOM 要怎么处理呢?事实上,这个点击事件并非只是简单地在被点击的元素上发生一次。那么点击事件是谁先得到通知并响应呢?

事件捕获

事件捕获就是指被点击元素的父级元素应该先接收到事件,并向下传播,就像例子中的按钮点击事件,接收到事件的元素顺序应该为 window > document > body > button.

事件冒泡

事件冒泡跟事件捕获好顺序相反,认为应该是被点击的具体元素先接受到事件:button > body > document > window.

事件阶段

当一个 DOM 事件发生时,要经历三个阶段:

1. 从文档的根节点流向目标对象 ---> 捕获阶段;

2. 在目标对象上被触发 ---> 目标阶段;

3. 回溯到文档的根节点 ---> 冒泡阶段。

三丶 卵用

通过事件监听(addEventListener(type,callback,true))在父级元素捕获事件,可以阻止事件冒泡(stopPropergation())引起的问题。

人气教程排行