Event Flow

DOM Event：事件流动（Event Flow）：

定义：

         DOM(文档对象模型)结构是一个树型结构，当一个HTML元素产生一个事件时，该事件会在元素节点与根结点之间的路径传播，路径所经过的结点都会收到该事件，这个传播过程可称为DOM事件流。 ^[1] 

         DOM同时支持两种事件模型：捕获型事件和冒泡型事件，但是，捕获型事件先发生。两种事件流会触发DOM中的所有对象，从document对象开始，也在document对象结束。

两种事件流：

  1. 冒泡事件流

          当事件在某一DOM元素被触发时，例如用户在客户名字节点上点击鼠标，事件将跟随着该节点继承自的各个父节点冒泡穿过整个的DOM节点层次，直到它遇到依附有该事件类型处理器的节点，此时，该事件是onclick事件。在冒泡过程中的任何时候都可以终止事件的冒泡，在遵从W3C标准的浏览器里可以通过调用事件对象上的stopPropagation()方法，在Internet Explorer里可以通过设置事件对象的cancelBubble属性为true。如果不停止事件的传播，事件将一直通过DOM冒泡直至到达文档根。

   2.捕获事件流

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

DOM事件流模型：

 

三阶段

在DOM兼容浏览器中，事件流分为3个阶段：

（1）捕获阶段：事件从Document节点自上而下向目标节点传播的阶段；

（2）目标阶段：真正的目标节点正在处理事件的阶段；

（3）冒泡阶段：事件从目标节点自上而下向Document节点传播的阶段。 

独特性质

DOM事件流最独特的性质是，文本节点也触发事件（在IE中不会），当鼠标单击“单击此文本”文本时会触发click事件，该事件的捕获阶段最先开始，从Document节点开始逐渐向下传播，直到“单击此文本”文本节点，事件进入目标阶段，在目标阶段结束之后，事件由“单击此文本”文本节点开始事件的冒泡阶段，直到Document节点为止。

 

Menthod:

• bubbles: 布尔值，表示事件是否冒泡
• cancelable: 布尔值，表示是否可以取消事件的默认行为
• currentTarget: 元素，事件处理程序当前正在处理事件的那个元素
• defaultPrevented: 布尔值，表示是否调用过preventDefault()方法
• detail: 整数，与事件相关的细节信息
• eventPhase: 整数，调用事件处理程序的阶段，1表示捕获阶段，2表示目标阶段，3表示冒泡阶段
• preventDefault(): 函数，取消事件的默认行为，cancelable为true时可以调用该方法
• stopImmediatePropagation(): 函数，取消事件的进一步捕获或冒泡，同时阻止任何事件处理程序被调用
• stopPropagation(): 函数，取消事件的进一步捕获或冒泡，bubbles为true时可以调用这个方法
• target: 元素，事件的目标
• trusted: 布尔值，为true时表示事件是浏览器生成的，否则表示事件是通过JS创建的
• type: 字符串，被触发的事件类型
• view: 与事件关联的抽象视图，等同于发生事件的window对象

 

 

 

参考链接：http://www.cnblogs.com/ljming/p/9944180.html　

　　　　　http://www.cnblogs.com/DJOSIMON/p/9943379.html