JS事件之事件流机制

众所周知JS和HTMl元素的交互几乎都是通过“事件”来完成的，事件从触发到完成响应一般分为3个阶段：捕获阶段，目标阶段，和冒泡阶段。

那么事件是在捕获阶段响应 还是在冒泡阶段响应那？？ 我们是可以手动设置事件是在捕获阶段响应还是在冒泡阶段响应。

 理解JS的事件流机制对充分理解JS的事件至关重要，那么什么是JS的事件流那？？

事件流：

可以理解为当事件发生时，响应事件的顺序。这个顺序就按照一个流进行的。这就是事件流。这个流是从里向外流，还是从外向里流那？？不同的浏览器事件流的流向不太一样。

例如IE采用的是 “事件冒泡流”(从里向外流），自然响应事件的顺序也是从里向外的，事件冒泡流也是大部分浏览器采用的默认方式；而网景采用的是 “事件捕获流”(从外向里流)

那么什么是事件冒泡流那？？什么有时事件捕获流那？？？



比如上图body里面有个div，div里面有一个button，当点击button的时候，浏览器会认为你同时点击了div，也点击了body。

如果button，div，body上都绑定了onclick事件，当点击button时，onclick事件就会按照事件流的流向依次做出响应，那么事件的响应顺序是从里往外流，还是从外向里那？？

IE的“事件冒泡流”会认为是从里往外; 先响应button上的事件在响应div上的事件，最后响应body上的事件；

而“事件捕获流”认为是从外向里流： 先响应body上的事件，在响应div上的，最后响应button上的事件。

大部分浏览器默认的都是事件源冒泡流的方式来响应事件（自然是在事件冒泡阶段做出响应），不过浏览器也都支持“事件捕获流”的方式（支持在捕获阶段响应事件），需要我们手动设置，怎么设置那？？

可以用“事件监听”方式绑定时间的时候来设置

例如： button.addEventListener(“click”,function( ){....},false);

将第三个参数设置为true，就表示在“捕获阶段”响应事件，此时事件流就是从外向里流的（先响应body上的事件，在响应div上的，最后响应button上的事件。

），关于绑定事件的几种方式请参考我的另一篇文章《JS事件之事件绑定》