javascript的事件流

事件流包括三个阶段:
1.事件捕获阶段
2.处于目标阶段
3.事件冒泡阶段

1.事件捕获阶段
现在页面中有一个按钮.
如果单击这个按钮的话,在事件捕获过程中,document会首先接收到click事件,然后沿着DOM树依次向下,一直传播到事件的实际目标input
因为老版本的浏览器不支持事件捕获,所以很少在使用这个事件流.
2.目标阶段:完成了事件捕获,紧接着处于目标阶段,这个时候发生事件了,弹出1(这个阶段非常特别,根据浏览器情况的不同以及调用程序的参数的不同号,在不同的时候执行,没办法把他具体的规划到是在事件捕获阶段执行还是事件冒泡阶段执行.最后干脆自成一派.);
3.事件冒泡阶段:事件开始由最具体的元素(文档中嵌套层次最深的那个节点)接受,然后逐级向上传播较为不具体的节点(文档).一直传到document.

后补:

从这个图上面来看的话,当我们触发一个事件的时候,那么这个事件处理函数是不是要在捕获阶段被调用一次,然后再冒泡阶段调用一次呢?

IE浏览器是没有事件捕获阶段这个概念的.它只有目标阶段,和事件冒泡阶段,二这个时候目标阶段是可以划归到事件冒泡阶段这个里面来的,因为他是在冒泡阶段触发的.

而现在的高版本浏览器是有事件捕获阶段的.但是默认是不在这个地方经行事件处理的.

那么想要在事件捕获阶段调用事件处理程序,应该如何写呢?

从Dom2开始,有了addEventListener()方法.

var btn = document.getElementById("guo");
            btn.addEventListener("click", function () { alert(this.value); }, true);//第三个参数时true,表示触发事件捕获阶段的调用

addEventListener(a,b,c);

第一个参数:事件名
第二个参数:事件的处理程序
第三个参数:true表示在事件捕获阶段调用时间处理程序;false表示在冒泡阶段调用事件处理程序.