在 JavaScript 中,事件冒泡和事件捕獲是兩種事件傳播的機(jī)制。它們決定了事件從哪個(gè)元素開(kāi)始觸發(fā),以及是否繼續(xù)向父元素傳播。理解這兩種機(jī)制對(duì)于有效地處理用戶(hù)交互非常重要。
事件冒泡是指事件從觸發(fā)元素開(kāi)始,逐級(jí)向上傳播到最外層的元素。在這個(gè)過(guò)程中,每個(gè)元素的事件處理函數(shù)都會(huì)被調(diào)用。通常,我們會(huì)在文檔的根元素(如 window
或 document
)上監(jiān)聽(tīng)事件,以便在事件冒泡過(guò)程中捕獲到該事件。
使用事件冒泡的示例:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Event Bubbling Example</title>
<style>
.outer { width: 200px; height: 200px; background-color: red; }
.inner { width: 100px; height: 100px; background-color: blue; }
</style>
</head>
<body>
<div class="outer" onclick="handleEvent(event)">
<div class="inner" onclick="handleEvent(event)"></div>
</div>
<script>
function handleEvent(event) {
alert('Event triggered at: ' + event.target.nodeName);
}
</script>
</body>
</html>
在這個(gè)示例中,當(dāng)你點(diǎn)擊內(nèi)部的 div
時(shí),它會(huì)觸發(fā) handleEvent
函數(shù),并顯示一個(gè)警告框,表明事件觸發(fā)在 div
元素上。由于事件冒泡,點(diǎn)擊外部 div
也會(huì)觸發(fā)該函數(shù)。
事件捕獲是指事件從最外層的元素開(kāi)始,逐級(jí)向下傳播到觸發(fā)元素的階段。在這個(gè)過(guò)程中,每個(gè)元素的事件處理函數(shù)都會(huì)被調(diào)用。你可以使用 addEventListener
方法的第三個(gè)參數(shù)來(lái)指定是否使用事件捕獲。
使用事件捕獲的示例:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Event Capturing Example</title>
<style>
.outer { width: 200px; height: 200px; background-color: red; }
.inner { width: 100px; height: 100px; background-color: blue; }
</style>
</head>
<body>
<div class="outer" id="outer">
<div class="inner" id="inner"></div>
</div>
<script>
document.getElementById('outer').addEventListener('click', function() {
alert('Event captured at: outer');
}, true); // 使用事件捕獲
document.getElementById('inner').addEventListener('click', function() {
alert('Event captured at: inner');
}, true); // 使用事件捕獲
</script>
</body>
</html>
在這個(gè)示例中,當(dāng)你點(diǎn)擊內(nèi)部的 div
時(shí),會(huì)先觸發(fā)外部 div
的捕獲事件處理函數(shù),然后觸發(fā)內(nèi)部 div
的捕獲事件處理函數(shù)。這與事件冒泡的行為相反。
你可以根據(jù)需要選擇使用事件冒泡或事件捕獲。通常,事件冒泡更常用,因?yàn)樗试S你在不直接操作觸發(fā)元素的情況下處理事件。然而,在某些特定場(chǎng)景下,事件捕獲可能更適合。