初學前端的時候,資料上說事件是異步的。
根據 mdn 的描述也是異步的。
事件(Event)是指一種用於處理在網頁的生命周期中發生的各種事件的異步調用的設計模式,也指一些不同種類事件的命名、描述和使用。
當時也不關心,會用就行。
后來,遇到了 HTMLElement.click
var dom = document.querySelector('xxx')
dom.addEventListener('click',function(){ console.log(' dom is clicked ') })
function test (){
dom.click()
console.log(' after dom.click() ')
}
test() // 'dom is clicked' ' after dom.click() '
手動觸發事件,事件觸發到函數執行並不是異步的。
所以當時認為事件是同步的。
有ajax這樣的 xhr的readyStateChange事件困擾我很久。
還是不清楚事件是異步還是同步。查了資料,也沒明白。
我現在想的是,事件是一個過程:
- 行為觸發 (異步)
- 事件處理 (同步)
這樣就說的通了。
行為觸發:什么時候用戶點擊、返回響應,這都是未知的也就是異步的。
事件處理:系統接收到事件觸發,找到對應dom的回調函數、並執行的過程是同步的。
dom.click()直接觸發,所以立即執行。
--------------2020-8-27 更新--------------
至於click事件是在 微任務中還是同步 暫時無從驗證
通過 dispatch、Element.Click() 觸發的click事件,事件回調是同步執行的。
dispatch觸發后未發生事件冒泡,僅在Event.target上觸發。
https://juejin.im/post/6844903657264136200#heading-5
這篇文章的觀點是click事件是異步的,列舉了click事件冒泡后回調執行晚於promise
https://github.com/ruanyf/es6tutorial/issues/691
這篇文章反駁了上述文章的案例
w3c文檔-列舉了事件的異步或同步
[w3c文檔-關於同步異步事件的說明]https://w3c.github.io/uievents/#sync-async