資料結構
網路
關係資料庫管理系統
作業系統
Java
MS Excel
iOS
HTML
CSS
安卓
Python
C 程式設計
C++
C#
MongoDB
MySQL
Javascript
PHP
物理
化學
生物
數學
英語
經濟學
心理學
社會科學
時裝研究
法律研究解釋 Javascript 中的事件流流程
在 JavaScript 中，事件流流程由以下三個概念完成：
事件目標 - 發生事件的實際 DOM 物件。
事件冒泡 - 如下所述
事件捕獲 - 如下所述
事件冒泡是指當一個元素巢狀在第二個元素內時呼叫事件處理程式的順序，並且兩個元素都為同一事件（例如，一次點選）註冊了監聽器。透過冒泡，事件首先被最內層的元素捕獲並處理，然後傳播到外層元素。
透過捕獲，事件首先由最外層元素捕獲並傳播到內層元素。
讓我們看兩個示例。
對於以下兩個示例，建立以下 HTML -
示例
<div id='outer' style='background-color:red;display:inline-block;padding:50px;'> Outer Div <div id='inner' style='background-color:yellow;display:inline-block;padding:50px;'> Inner Div </div> </div>
事件冒泡
document.querySelector('#outer').addEventListener('click', e => {
console.log('Outer div is clicked');
}, false);
document.querySelector('#inner').addEventListener('click', e => {
console.log('Inner div is clicked');
}, false);如果你執行上述程式碼並單擊內部 div，你會得到日誌 -
已單擊內部 div
已單擊外部 div
事件捕獲
document.querySelector('#outer').addEventListener('click', e => {
console.log('Outer div is clicked');
}, true);
document.querySelector('#inner').addEventListener('click', e => {
console.log('Inner div is clicked');
}, true);輸出
如果你執行上述程式碼並單擊內部 div，你會得到日誌 -
Outer div is clicked Inner div is clicked
更新時間：19-9-2019
604 次觀看
廣告