如果使用者在物件一點擊滑鼠左鍵,物件二同樣也會收到一個click事件,而物件一先收到還是物件二先收到事件,因瀏覽器而不同,在W3C的DOM模型裡,兩種方式都有實作。


物件一

物件二



如果是物件一先收到事件,而物件二後收到的話,這樣的事件處理為Event bubbling,IE以此模式實作。

如果是物件二先收到事件,而物件一後收到的話,這樣的事件處理為Event capturing

W3C的DOM模型是兩者都採用,不過會先以Event capturing的順序跑過一次所有物件的事件處理函式後,再以Event bubbling的順序跑一次。

在JavaScript中有addEventListener()函式可以註冊事件的處理函式,prototype.js所實作的observe()函式即透過addEventListener()達成,這個函式的最後一個參數就是useCapture,它的值是一個boolean值,true是代表該函式要在capturing的順序中被觸發,false代表要在bubbling的順序中被觸發。

參考資料:
AJAX 網頁程式設計--Google成功背後的技術

jck11 發表在 痞客邦 PIXNET 留言(0) 人氣()