Day385:在一个 DOM 上同时绑定两个点击事件：一个用捕获，一个用冒泡。事件会执行几次？先执行冒泡还是捕获？ about fe-interview HOT 9 OPEN

如果该 DOM 是目标元素，则按事件绑定顺序执行，不区分冒泡/捕获 <<< 这句话有问题，测试以下代码，都是先执行捕获，再执行冒泡，与事件绑定顺序无关

window.addEventListener('click', () => {console.log('aa')})
window.addEventListener('click', () => {console.log('bbbbbbb')}, true)

from fe-interview.

老哥，经过实践，触发目标元素的点击事件，不论绑定捕获冒泡的顺序如何更改，回调的顺序都是先捕获再冒泡！！！火狐谷歌都是...
如果是我理解有误麻烦指正，如果是参考分析有误还请订正。

from fe-interview.

chrome,firefox都支持两种事件，捕获和冒泡，IE仅支持冒泡

from fe-interview.

 <div id="btn">点击
    <div id="btn2" style="margin: 100px;">
      点击2
    </div>
  </div>
  <script>
    const btn = document.getElementById('btn')
    const btn2 = document.getElementById('btn')
    btn.addEventListener('click', () => {console.log('aa')})
    btn.addEventListener('click', () => {console.log('bb')}, true)
    
    btn2.addEventListener('click', () => {console.log('cc')})
    btn2.addEventListener('click', () => {console.log('dd')}, true)
  </script>

在chrome的结果都是

"bb"
"dd"
"aa"
"cc"

from fe-interview.

公众号好像不维护了。但是还是帮忙留言chrome的实际行为是「该场景下捕获总是在冒泡之前触发」

from fe-interview.

如果目标DOM元素有事件，则先事件，后捕获，然后在冒泡。

from fe-interview.

 <div id="btn">点击
    <div id="btn2" style="margin: 100px;">
      点击2
    </div>
  </div>
  <script>
    const btn = document.getElementById('btn')
    const btn2 = document.getElementById('btn')
    btn.addEventListener('click', () => {console.log('aa')})
    btn.addEventListener('click', () => {console.log('bb')}, true)
    
    btn2.addEventListener('click', () => {console.log('cc')})
    btn2.addEventListener('click', () => {console.log('dd')}, true)
  </script>

在chrome的结果都是

"bb"
"dd"
"aa"
"cc"

哈哈哈哈哈哈哈哈哈

from fe-interview.

const btn2 = document.getElementById('btn') 错误了

from fe-interview.

chrome,firefox都支持两种事件，捕获和冒泡，IE仅支持冒泡

我觉得这个得加上浏览器的兼容性问题，脱离兼容性说这个，有点缺乏完整性，很多回答是ie之外的浏览器，确实是不论绑定的事件的先后顺序，先捕获后冒泡，这个可以结合react中实现的合成事件来说或许更完整些，react的合成事件就是基于兼容性，为了磨平浏览器的差异，实现了一套类似冒泡阶段执行事件的机制，在合成事件中，只在冒泡阶段执行一次。

from fe-interview.