js事件捕獲與冒泡機制的探索
阿新 • • 發佈:2019-02-20
Javascript的事件處理主要分為3個階段,事件的捕獲,目標階段,事件的冒泡。如何透徹的領悟到其中的過程呢?
先了解一下整體的過程:當用戶點選某一個元素以後,瀏覽器會拿到事件的具體資訊,包括在點選的位置,事件的型別等資訊。然後瀏覽器會根據這些資訊去去遍歷一次dom節點,去檢視是否有與本次事件相關的繫結函式,再根據事件實在捕獲的時候觸發還是在冒泡的時候觸發將處理函式新增到任務佇列。
注意:目標元素本身是不會處在事件捕獲階段的。
瀏覽器事件機制詳細展示了時間處理的整個流程,從document開始進行事件的捕獲,一直捕獲到目標元素的父元素,捕獲過程就結束了,然後開始是目標階段。目標階段會執行目標元素繫結的事件,但實際中,目標元素的事件處理是在冒泡階段進行的。接下來就是冒泡階段,事件又會傳播回到文件。
下圖的測試就能說明整個事件處理機制。三個元素,爺爺、爸爸和皇上,綁定了兩個事件,分別在事件的捕獲和冒泡階段執行(addEventListener的第三個引數為true時代表在事件的捕獲階段執行繫結的函式)。按照繫結的方式,應該依次輸出‘我是爺爺, 捕獲‘>’我是爸爸,捕獲‘>’我是皇上,捕獲‘>’我是皇上’> ‘我是爸爸‘>’我是爺爺‘;但是實際的輸出中,‘我是皇上’在’我是皇上,捕獲’之前輸出了,說明目標元素上註冊捕獲階段執行的函式不是在捕獲階段執行的,而是在冒泡階段按照事件的繫結順序依次執行的。