[JavaScript] DOM的Event Flow、捕捉、冒泡

JavaScript
DOM
event

四個事件傳遞階段(event phase)

Event.NONE,值為0,無事件
Event.CAPTURING_PHASE,值為1,由window-->document-->...-->EventTarget
Event.AT_TARGET ,值為2,事件抵達目標node,已註冊的event listener被觸發,如果event.bubbles是false,則不會冒泡,Completed
Event.BUBBLING_PHASE ,值為3,一路冒泡回window

W3C說明圖如下(注意顏色)


EventTarget.addEventListener()

最常使用的參數語法:arget.addEventListener( type, listener, useCapture );


type:事件類型的字串符


listener:通常會用一個function來實作,如(e) => { console.log( e.eventPhase ) },e為必帶參數,表示收到的event


useCapture:boolean,true表示在捕捉階段會被觸發;default為false,則是冒泡階段才觸發


注意在Target Phase時,沒有所謂的useCapture為true or false問題

(當然,因為既非Capture nor Bubbling)


addEventListener執行先後依code的先後順序決定。


後記:addEventListener第三個參數隨著時代演進,多了options的用法,詳見MDN



© 2021 Hamsterism. All rights reserved github