JavaScript-浅谈DOM事件流

haitiancoder 发布于2019-08-20 10:49 / 962人阅读

摘要：事件流指的是从页面接收事件的顺序。级事件规定方法的第三个参数设为，表示事件在捕获阶段触发。目前支持事件捕获流的浏览器有，，，，。事件流根据级事件规定，事件流应该包括三个阶段，事件捕获阶段，处于目标阶段和事件冒泡阶段。

什么是事件？（敲黑板）

事件，就是文档或浏览器窗口发生的一些特定的交互瞬间。（by 《JavaScript高级程序设计》）
比如鼠标点击，双击，滚动条滑动...

什么是事件流？

先来看一个简单的例子：




    
    Document

这时候我们点击btn的同时，也可以视为同时点击了btn的容器元素，甚至单击了整个页面。
事件流指的是从页面接收事件的顺序。
关于事件流，IE和Netscape提出了差不多相反的概念，IE提出的就是广为人知的事件冒泡流，而Netscape提出的则是事件捕获流。

1. 事件冒泡

事件冒泡，即事件开始时由最具体的元素接收，如上面例子中的btn，然后逐渐向上级传播到较为不具体的节点。DOM2级事件规定addEventListener方法的第三个参数设为false，表示事件在冒泡阶段触发。

注：使用频繁的事件委托实际上也是利用了事件冒泡。

还是相同的DOM结构为例：




    
    Document

如果我们点击btn，那么这个click事件的传播顺序如下：

也就是，click事件首先在btn元素上触发，而这个元素就是我们单击的元素，然后click事件沿DOM树向上传播，在每一级的节点都会发生，直至传播到document对象。
所有现代浏览器都支持事件冒泡。

2. 事件捕获

事件捕获，即事件从不太确定的节点接收，然后向下传播到最具体的节点，事件捕获的用意在于在事件到达预期目标之前捕获它。DOM2级事件规定addEventListener方法的第三个参数设为true，表示事件在捕获阶段触发。
还是相同的DOM结构为例：
将参数改为true




    
    Document

如果我们点击btn，那么这个click事件的传播顺序如下：

在事件捕获过程中，document对象首先接收到click事件，然后事件沿着DOM树依次向下传播。
目前支持事件捕获流的浏览器有：IE9，Safari，Chrome，Opera，Firefox。
由于老版本浏览器不支持事件捕获，建议大家更多的是用事件冒泡，在有特殊需要时再使用事件捕获。

3. DOM事件流

根据DOM2级事件规定，事件流应该包括三个阶段，事件捕获阶段，处于目标阶段和事件冒泡阶段。
还是相同的DOM结构为例：




    
    Document

如果我们点击btn，那么这个click事件的传播顺序如下：

在DOM事件流中，实际的目标btn不会接收到事件。这意味着在捕获阶段，事件从document到btn-wrap就停止了，下一阶段是“处于目标”阶段，于是事件在btn上发生，然后冒泡阶段发生，事件又传播回文档。

注：多数支持DOM事件流的浏览器都实现了一种特定行为，即使DOM2级事件规范明确要求捕获阶段不会涉及目标阶段，IE9，Safari，Chrome，Firefox，Opera9.5及更高版本都会在事件捕获阶段触发事件对象上的事件,这也是上图btn被触发两次的原因。
IE9，Safari，Chrome，Firefox，Opera都支持DOM事件流，IE8及更早版本不支持DOM事件流。

本文知识点大多来自《JavaScript高级程序设计》一书，博主在这里也是做一次总结，巩固一下相关知识，同时也希望没接触过事件流的童鞋们，有一个大概的概念。

云服务器 GPU云服务器 javascript_dom事件 javascript事件流浅谈javascript DOM事件

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/yun/80339.html

浅谈JavaScript事件

摘要：浅谈事件事件流的事件流有提出的捕获流的冒泡流以及级事件流。真实的过程取决于事件的目标元素以及各目标元素的祖先元素是否有事件处理函数。事件处理函数需要注意的指的是或后面讨论。两种方法都会给事件处理函数传一个事件对象作为参数。浅谈JavaScript事件事件流 JavaScript的事件流有：Netscape提出的捕获流、IE的冒泡流以及DOM2级事件流。这里只讨论DOM2级事件流。 ...

IamDLY 2019-08-21 11:27 评论0 收藏0
浅谈DOMContentLoaded事件及其封装方法

摘要：事件虽然不支持，但它支持事件，该事件的目的是提供与文档或元素的加载状态有关的信息。事件可以用于检测是否加载完毕，当时，表示加载完成。封装事件以下，是封装事件从而达到良好的兼容性的一个简单的代码实现。我们在开发时，经常需要检测页面是否加载完毕，以确保脚本安全运行，下面我们就来浅谈一下检测页面是否加载完毕的那些事件们。 1. onload 事件在页面的所有资源加载完成时，window对...

waruqi 2019-08-19 18:41 评论0 收藏0
浅谈DOMContentLoaded事件及其封装方法

摘要：事件虽然不支持，但它支持事件，该事件的目的是提供与文档或元素的加载状态有关的信息。事件可以用于检测是否加载完毕，当时，表示加载完成。封装事件以下，是封装事件从而达到良好的兼容性的一个简单的代码实现。我们在开发时，经常需要检测页面是否加载完毕，以确保脚本安全运行，下面我们就来浅谈一下检测页面是否加载完毕的那些事件们。 1. onload 事件在页面的所有资源加载完成时，window对...

leon 2019-08-01 15:25 评论0 收藏0
浅谈事件冒泡与事件捕获

摘要：事件冒泡与事件捕获事件冒泡和事件捕获分别由微软和网景公司提出，这两个概念都是为了解决页面中事件流事件发生顺序的问题。事件冒泡微软提出了名为事件冒泡的事件流。事件冒泡与事件捕获事件冒泡和事件捕获分别由微软和网景公司提出，这两个概念都是为了解决页面中事件流（事件发生顺序）的问题。 Click me! 上面的代码当中一个div元素当中有一个p子元素，如果两个元素都有一个cli...

zhunjiee 2019-08-21 10:21 评论0 收藏0
2018 浅谈前端面试那些事

摘要：声明的变量不得改变值，这意味着，一旦声明变量，就必须立即初始化，不能留到以后赋值。虽然今年没有换工作的打算但为了跟上时代的脚步还是忍不住整理了一份最新前端知识点知识点汇总 1.HTML HTML5新特性，语义化浏览器的标准模式和怪异模式xhtml和html的区别使用data-的好处meta标签canvasHTML废弃的标签IE6 bug，和一些定位写法css js放置位置和原因...

LiuRhoRamen 2019-08-30 14:11 评论0 收藏0