绑定事件与冒泡

参考地址： http://www.calledt.com/target-and-currenttarget/

整个click有两个阶段，首先由点击元素的最祖先元素一个个传递到点击元素，这是捕获阶段。再由当前元素一个个传递到祖先元素，这叫冒泡阶段。

addEventListener有第三个参数，true代表捕获阶段绑定，flase（默认）代表冒泡阶段绑定。

假设有

<div id="a">

     <div id="b">

          <div id="c" />

     </div>

</div>

然后他们都绑定了事件

console.log("target="+e.target.id+"currentTarget="+t.currentTarget.id)

那么点击c会出现什么情况：

如果对于事件的绑定是

document.getElementById("...").addEventListener('click',function(e){...})

那么这种绑定方法是在冒泡阶段绑定的，那么输出就是

target=c currentTarget=c

target=c currentTarget=b

target=c currentTarget=a

这是因为target是触发事件的元素，currentTarget是当前这个事件是哪个元素的。

冒泡的顺序是从小到大，就是从子到父。

冒泡能被阻止。比如b的click事件里加一句

event.stopPropagation();

另外说捕获顺序。即你点击c，于是a->b->c。

虽然，DOM2级事件规定的时间流包括三个阶段：

事件捕获阶段

处于目标阶段

事件冒泡阶段

在事件流中，实际的目标在捕获阶段不会接收到事件，下一个阶段是是处于目标的阶段，这时候事件会被触发，最后进入事件冒泡阶段。

可以理解为 在冒泡阶段，当前在哪个元素，事件的目标就是哪个元素。所以在c这个元素的时候可以算作冒泡阶段，因为这时候当前元素已经是事件的currentTarget了。

一般我们认为处于目标阶段是事件冒泡阶段的一部分。

捕获的console结果和冒泡刚好相反。

target=c currentTarget=a

target=c currentTarget=b

target=c currentTarget=c

捕获可以被阻止：

event.stopImmediatePropagation();

这个也可以阻止冒泡。