前几天在B站看到个视频，讲解了事件循环，里面的有一道事件循环的题目，估计很多人不怎么细心想的话会做错。
题目内容：有如下代码块，请写出点击了 button 后，控制台的输出内容
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<button id="btn">click</button>
<script>
var oBtn = document.getElementById('btn')
oBtn.addEventListener('click', function () {
Promise.resolve().then(() => console.log('微任务 1'))
console.log('listener1')
})
oBtn.addEventListener('click', function () {
Promise.resolve().then(() => console.log('微任务 2'))
console.log('listener2')
})
</script>
</body>
</html>
答案： 
我个人的理解，先输出 listener1 和 微任务1，后再输出 listener2 和 微任务2，是因为js是单线程执行的，所以事件肯定也是从第一个 EventListener 开始执行的。那么在执行第一个的时候，由于 promise 是走微任务的，所以先输出 listener1，接下来肯定有挺多人会认为是要执行 Listener2 中的代码了，但其实不是，在 javascript 的堆栈中，监听 click 的事件结束了，在目前的微任务队列中，里面只有一个 Listener1 的 Promise，由于第2个 EventListener 还暂时没执行到，所以就会轮到 Promise 的这个微任务了。以此类推，EventListener2 中的打印也是如此。
但是如果题目改成如下，控制台将输出什么呢？
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<button id="btn">click</button>
<script>
var oBtn = document.getElementById('btn')
oBtn.addEventListener('click', function () {
Promise.resolve().then(() => console.log('微任务 1'))
console.log('listener1')
})
oBtn.addEventListener('click', function () {
Promise.resolve().then(() => console.log('微任务 2'))
console.log('listener2')
})
oBtn.click()
</script>
</body>
</html>
答案：
那这个输出怎么是 listener1 和 listener2 先输出后再输出 微任务1 和 微任务2 啊？在 javascript 的堆栈中，click() 运行，然后依次执行 listener1 和 listener2 的事件，也就是先打印 listener1，将 微任务1 推入微任务队列中，然后打印 listener2，将 微任务2 推入微任务队列中，此时微任务队列中，有两个微任务，并且 click 事件执行完毕，javascript 堆栈中的 click() 已经执行结束，接下来就是执行按顺序执行微任务队列中的了，故有以上输出。针对题目二，我手工画了个简单的草图，大概表示一下过程：
