javascript dom 事件的冒泡和捕获顺序
突然想到这么一个问题,js中dom事件的冒泡和捕获是怎么一个顺序呢?如下测试.
[html]
<div id="testdiv4" style="background:black;padding:10px;">
<div id="testdiv3" style="background:green;padding:10px;">
<div id="testdiv2" style="background:blue;padding:10px;">
<div id="testdiv1" style="background:red;">
<input type="button" id="buttonid" value="test" />
</div>
</div>
</div>
</div>
[/html]
[javascript]
document.getElementById('buttonid').addEventListener('click',function(e){
//e.stopPropagation();
console.log('i am eventtarget button');
},false);
document.getElementById('testdiv4').addEventListener('click',function(e){
//e.stopPropagation();
console.log('i am testdiv4444');
},false);
document.getElementById('testdiv3').addEventListener('click',function(e){
//e.stopPropagation();
console.log('i am testdiv3333');
},true);
document.getElementById('testdiv2').addEventListener('click',function(e){
//e.stopPropagation();
console.log('i am testdiv2222');
},false);
document.getElementById('testdiv1').addEventListener('click',function(e){
//e.stopPropagation();
console.log('i am testdiv1111');
},true);
[/javascript]
结果:
i am testdiv3333
i am testdiv1111
i am eventtarget button
i am testdiv2222
i am testdiv4444
通过观察可以得出一个结论:ff浏览器把冒泡和捕获分开处理,设置为冒泡的分为一组,设置为捕获的分为另外一组,而且,捕获的优先级大于冒泡,具体执行细节还有待探究,另个 每个事件中的e.stopPropagation();都能把执行链条打断,这和冒泡和捕获的执行顺序无关,以上小记.
