SOURCE

const $inner = document.querySelector('#inner')
const $outer = document.querySelector('#outer')

function handler(e) {
    //   console.log('click1',e.target.id) // 直接输出
    //   Promise.resolve().then(_ => console.log('promise2')) // 注册微任务
    //   setTimeout(_ => console.log('timeout4',e.target.id)) // 注册宏任务
    //   requestAnimationFrame(_ => console.log('animationFrame5',e.target.id)) // 注册宏任务
    //   $outer.setAttribute('data-random', Math.random()) // DOM属性修改，触发微任务


    console.log('script start1');
    setTimeout(function () {
        console.log('setTimeout');
    }, 0);

    Promise.resolve().then(function () {
        console.log('promise1');
    }).then(function () {
        console.log('promise2');
    });
    console.log('script end2');



}

new MutationObserver(_ => {
    console.log('observer3')
}).observe($outer, {
    attributes: true
})

$inner.addEventListener('click', handler)
$outer.addEventListener('click', handler)

<style>
  #outer {
    padding: 20px;
    background: red;
  }

  #inner {
    width: 100px;
    height: 100px;
    background: #757575;
  }
</style>
<div id="outer">
  <div id="inner"></div>
</div>