关于DOM事件捕获和冒泡顺序问题？
DOM事件的顺序是按照
捕获-->元素-->冒泡
的顺序进行的，但是请看下面代码
但执行结果却是这样的
为什么最内层的元素没有按照捕获--冒泡的顺序执行，而是按照事件注入的顺序执行的呢？
Qyouu浏览 402回答 1
1回答
-
慕斯王
如果把事件的传递看做一个流，那么它应该是一个首尾闭合的环，捕获和冒泡各点半个圆。那么问题在于捕获和冒泡是针对被点击对象（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>
随时随地看视频慕课网APP
相关分类
JavaScript