事件流、事件捕獲和事件冒泡的介紹

事件流、事件捕獲和事件冒泡的介紹

最近有用到對應的場景，下班了特地來整理下響應的概念，鞏固下知識。

我們在點擊頁面時，事件發生時會在各元素節點按照一定的順序進行傳播，這種傳播過程就稱作事件流。

事件流分為三個階段：

1、事件捕獲階段

事件從window發出，不斷向子元素尋找對應的目標節點

2、事件目標階段

事件找到了對應的目標節點，即此時再往下已經沒有對應的節點

3、事件冒泡階段

事件從節點位置網上回溯到文檔的根節點

我們在使用給dom添加事件時一般使用addEventListener方法，該方法傳入三個參數

1、對應的事件名稱如：click

2、函數：觸發對應的交互響應后執行的函數

3、userCapture：指定事件是在捕獲還是冒泡階段執行，默認false。（或者傳入一個options選項，但是今天不講這個）

語法：

target.addEventListener(type, listener, useCapture);

示例

// 對應的打印結果 body 事件捕獲 test.html:37 container 事件捕獲 test.html:26 btn 事件捕獲 test.html:23 btn 事件冒泡1 test.html:29 btn 事件冒泡2 test.html:34 container 事件冒泡 test.html:15 body 事件冒泡

可以看到，都是先觸發捕獲再觸發冒泡事件，先從body（上）到btn（下），再從btn（下）到body（上）。有個例子就講的挺有形象，就好比一個塑料扔到水里，先往下沉（捕獲階段），沉到最底部（目標階段）再慢慢浮起來（冒泡階段）。

HTML

版權聲明：本文內容由網絡用戶投稿，版權歸原作者所有，本站不擁有其著作權，亦不承擔相應法律責任。如果您發現本站中有涉嫌抄襲或描述失實的內容，請聯系我們jiasou666@gmail.com 處理，核實后本網站將在24小時內刪除侵權內容。

版權聲明：本文內容由網絡用戶投稿，版權歸原作者所有，本站不擁有其著作權，亦不承擔相應法律責任。如果您發現本站中有涉嫌抄襲或描述失實的內容，請聯系我們jiasou666@gmail.com 處理，核實后本網站將在24小時內刪除侵權內容。