同一个dom绑定多个事件,执行顺序一探究竟
document.body.addEventListener(‘click’, () => {

  Promise.resolve().then(()=>console.log(1));
  
  console.log(2)

});

document.body.addEventListener(‘click’, () => {

  Promise.resolve().then(()=>console.log(3));
  
  console.log(4)

});


正确答案为 2 1 4 3


函数执行顺序只和绑定顺序有关, 第一个函数先绑定,所以先执行第一次绑定的函数。再深入了解,宏任务与微任务的区别:


宏任务:I/O setTimeout setInterval setImmediate requestAnimationFrame (UI rendering存疑)

微任务: process.nextTick() promise.then MutationObserver


I/0 解释:点击一次button,上传一个文件,与程序产生交互的这些都可以称之为I/O


ps:在当前的微任务没有执行完成时,是不会执行下一个宏任务的。


所以,上面就可以拆解为点击body,进行了一次I/O操作,先执行宏任务,回调中有promise.then 执行微任务,微任务执行完毕,执行下一个宏任务,所以正确答案微2 1 4 3.



扩展:

1、我们可以给一个 `dom` 元素绑定同一个函数,最多只能绑定 `useCapture` 类型不同的两次。


document.body.addEventListener('click', foo1);
document.body.addEventListener('click', foo1);

function foo1(event) {
  console.log(111);
}
//111


document.body.addEventListener('click', foo1, true);
document.body.addEventListener('click', foo1, false);

function foo1(event) {
  console.log(111);
}
//111
//111



参考:掘金 知乎

确认 取消