事 件 流

• 在JavaScript中，事件流指的是DOM事件流。
• 当一个事件发生时，不仅产生事件的元素响应，其他的元素也会响应。
• 由于DOM模型是一个树状结构，其中的HTML元素上产生一个事件时，该事件会在DOM树中元素节点和根节点之间按照特定的顺序传播，路径所经过的节点都会收到该事件，这个过程就是DOM的事件流。
• 按照传播方向的不同，DOM事件流有两种方式：冒泡事件和捕获事件

• 在JavaScript中，默认使用冒泡事件。
• 当事件在某一元素上触发时，事件将沿着整个节点的父节点自下而上穿过多个DOM节点，就像冒泡一样，所以这种方式称为冒泡事件。
• 在冒泡的过程中，在任何时候都可以终止事件的冒泡。如果不终止冒泡，事件流会沿着DOM节点一直向上直至DOM的根节点。
• 例如：给绑定一个单击事件，给里的也绑定一个单击事件，给外的也绑定一个单击事件，当的单击事件触发时，事件会从流向，然后流向，和的单击事件也会被触发
• 所谓的冒泡事件就是事件向上传导，当后代元素上的事件被触发时，其祖先元素的相同事件也会被触发
• 在开发中大部分情况冒泡都是有用的，如果不希望发生冒泡事件，可以通过事件对象来取消冒泡事件（将事件对象的属性cancelBubble设置为true，即可取消冒泡）

• 与冒泡事件相反，在捕获事件中，事件的传播将从DOM树的根节点开始，而不是从触发事件的目标元素开始。
• 事件是从目标元素的所有祖先元素依次向下传递。
• 在这个过程中事件会从DOM树的根元素到事件目标元素之间各个继承之间的元素所捕获。
• 如果希望在捕获阶段就触发事件，可以将addEventListener()的第三个参数设置为true。
• 一般情况下不会希望在捕获阶段触发事件，所以这个参数一般都是false

• 关于事件的传导网景公司和微软公司有不同的理解
• 微软公司认为事件应该是由内向外传播，也就是当事件触发时，应该先触发当前元素上的事件，然后再向当前元素的祖先元素上传导，也就是说事件应该在冒泡阶段执行
• 网景公司认为事件应该是由外向内传导的，也就是当前事件触发时，应该先触发当前元素的最外层的祖先元素的事件，然后再向内传播给后代
• W3C综合了两个公司的方案，将事件传播分成了三个阶段

事件将沿着DOM树向下传递，经过目标节点的每一个祖先节点，直到目标节点。例如：用户单击了一个超链接，则该单击事件将从document节点转送到HTML元素、body元素以及包含超链接的div元素。就是目标节点。IE8及以下的浏览器没有捕获阶段 

在次阶段中，事件传导到目标节点。浏览器在查找到已经指定给目标事件的事件监听器之后，就会运行该事件监听器

事件将沿着DOM树向上传递，再逐次访问目标元素的祖先节点直到documentj节点。该过程的每一步，浏览器都会执行那些不是捕捉事件监听器的事件监听器（EventListener）