DOM事件的顺序是按照捕获-->元素-->冒泡的顺序进行的，但是请看下面代码但执行结果却是这样的为什么最内层的元素没有按照捕获--冒泡的顺序执行，而是按照事件注入的顺序执行的呢？
1 回答
慕斯王
TA贡献1864条经验 获得超2个赞
如果把事件的传递看做一个流，那么它应该是一个首尾闭合的环，捕获和冒泡各点半个圆。那么问题在于捕获和冒泡是针对被点击对象（btn）的祖先元素而言的，但是对象本身就比较有意思了。如果对象里面还有子元素，并且你点击到了它的子元素，那么事件会流过子元素，然后再流回来，这个时候，代码的表现是正常的。DOM如下：
<div id="app">
<span id="btn">
<b>测试</b>
</span>
</div>
如果被点击对象里面没有子元素了，那么事件在这里已经终结了，也就是说『捕获』和『冒泡』在这个元素在进行交接，这个时候就有意思了，这两个事件是同时触发的，那么 js 的监听代码的书写顺序会影响最后的 console 结果，如果这样写的话，那么代码就是按你的想法完成的：
<body>
<div id="app">
<span id="btn">测试</span>
</div>
<script>
var btn = document.getElementById('btn');
var app = document.getElementById('app');
//btn捕获
btn.addEventListener('click',function(){
console.log('捕获','btn');
},true);
//div捕获
app.addEventListener('click',function(){
console.log('捕获','div');
},true);
document.body.addEventListener('click',function(){
console.log('捕获','body');
},true);
document.body.addEventListener('click',function(){
console.log('冒泡','body');
},false);
//btn冒泡
btn.addEventListener('click',function(){
console.log('冒泡','btn');
},false);
//div冒泡
app.addEventListener('click',function(){
console.log('冒泡','div');
},false);
</script>
</body>
添加回答
举报
0/150
提交
取消