JS中的事件广播分为三个阶段:事件捕获,事件处理的调用,事件冒泡。
1.事件捕获:沿DOM树向里面走下去,走到 一个节点
2.事件调用:定义在节点上的事件处理程序(如:click mouseove等)
3.事件冒泡:从这个节点沿DOM树向上走。(这里会调用父元素的事件处理调用,可用stopPropagation在IE中用cancelbubble)
在了解了事件广播后再来看addEventListener()的第三个参数。为boolean值,false为事件冒泡(即在第三阶段),true为事件捕获(即在第一阶段)。
其实原来仅有两个参数,可IE是事件冒泡,所以定义了第三个参数。但IE的事件冒泡的顺序更符合人们的日常思维(所以IE也不是一无是处),所以有错就改。
可这有什么意义呢?
当它进行到第三阶段时,问题来了。
如果父子节点都有click事件处理,当我们点击子节点时。
会先调用子节点的click,
这时会冒泡到父节点。
再调用父节点的click。
可我们并不需要父节点的click啊!
这时需要调用stopPropagation(),在IE中使用cancelbubble();
本文完结
Code is Poetry!