事件流

Posted yixiaoyu

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了事件流相关的知识,希望对你有一定的参考价值。

DOM事件流

DOM(文档对象模型)结构是一个树型结构,当一个html元素产生一个事件时,该事件会在元素节点与根结点之间的路径传播,路径所经过的结点都会收到该事件,这个传播过程可称为DOM事件流。DOM事件流最独特的性质是,文本节点也触发事件(在IE中不会),当鼠标单击“单击此文本”文本时会触发click事件,该事件的捕获阶段最先开始,从Document节点开始逐渐向下传播,直到“单击此文本”文本节点,事件进入目标阶段,在目标阶段结束之后,事件由“单击此文本”文本节点开始事件的冒泡阶段,直到Document节点为止

定义

DOM(文档对象模型)结构是一个树型结构,当一个HTML元素产生一个事件时,该事件会在元素节点与根结点之间的路径传播,路径所经过的结点都会收到该事件,这个传播过程可称为DOM事件流。 [1] 
DOM同时支持两种事件模型:捕获型事件和冒泡型事件,但是,捕获型事件先发生。两种事件流会触发DOM中的所有对象,从document对象开始,也在document对象结束。 [2] 
DOM事件模型的最独特的性质是,文本节点也触发事件(在IE中不会)

两种事件流

冒泡事件流

当事件在某一DOM元素被触发时,例如用户在客户名字节点上点击鼠标,事件将跟随着该节点继承自的各个父节点冒泡穿过整个的DOM节点层次,直到它遇到依附有该事件类型处理器的节点,此时,该事件是onclick事件。在冒泡过程中的任何时候都可以终止事件的冒泡,在遵从W3C标准的浏览器里可以通过调用事件对象上的stopPropagation()方法,在Internet Explorer里可以通过设置事件对象的cancelBubble属性为true。如果不停止事件的传播,事件将一直通过DOM冒泡直至到达文档根。
如果想创建一个捕捉事件,在支持W3C 事件模型的浏览器中,将addEventListener的第三个参数设为true就好了。例如:
前一阵因为想弄懂事件捕捉,所以做了点小实验,分别在Firefox 2、Safari 3 on Windows和Opera 9上实践了事件捕捉(当然,因为IE不支持事件捕捉,所以…),实验的原理见下图:
技术分享图片
ID为div1和div2的两个元素都被委派了捕捉阶段的事件处理函数,这样:
当点击#div1(蓝色区域)时,应该会alert出”div1″
当点击#div2(黄色区域)时,应该会先alert出”div1″,再alert出”div2″,因为在事件捕捉阶段,事件是从根元素向下传播的,#div1是#div2的父元素,自然绑定在#div1上的click事件也会先于#div2上的click事件被执行
然而,以上的设想只适用于Firefox 2和Safari 3 on Windows,在Opera 9中,事情会变成这样:
当点击#div1(蓝色区域)时,什么都不会发生
当点击#div2(黄色区域)时,会alert出”div1″,随后什么都不会再发生
 

捕获事件流

事件的处理将从DOM层次的根开始,而不是从触发事件的目标元素开始,事件被从目标元素的所有祖先元素依次往下传递。在这个过程中,事件会被从文档根到事件目标元素之间各个继承派生的元素所捕获,如果事件监听器在被注册时设置了useCapture属性为true,那么它们可以被分派给这期间的任何元素以对事件做出处理;否则,事件会被接着传递给派生元素路径上的下一元素,直至目标元素。事件到达目标元素后,它会接着通过DOM节点再进行冒泡。
 

DOM事件流模型

三阶段

在DOM兼容浏览器中,事件流分为3个阶段:
(1)捕获阶段:事件从Document节点自上而下向目标节点传播的阶段;
(2)目标阶段:真正的目标节点正在处理事件的阶段;
(3)冒泡阶段:事件从目标节点自上而下向Document节点传播的阶段。 
 

独特性质

DOM事件流最独特的性质是,文本节点也触发事件(在IE中不会),当鼠标单击“单击此文本”文本时会触发click事件,该事件的捕获阶段最先开始,从Document节点开始逐渐向下传播,直到“单击此文本”文本节点,事件进入目标阶段,在目标阶段结束之后,事件由“单击此文本”文本节点开始事件的冒泡阶段,直到Document节点为止。 [
另外,需要说明的是,有些事件是可以取消的,在整个事件流的任何位置通过调用事件的stopPropagation方法可以停止事件的传播过程。 
 
原文    https://baike.baidu.com/item/DOM%E4%BA%8B%E4%BB%B6%E6%B5%81/7508053
 



以上是关于事件流的主要内容,如果未能解决你的问题,请参考以下文章

javascript事件流是啥?都有哪些事件流?

js中的事件流和事件处理程序

事件流(事件冒泡事件捕获和DOM事件流)

js 事件流

DOM事件揭秘-事件流

js事件流事件处理程序/事件侦听器