JavaScript 事件冒泡與捕獲咋使用

小樊
81
2024-10-24 08:50:01

在 JavaScript 中，事件冒泡和事件捕獲是兩種事件傳播的機(jī)制。它們決定了事件從哪個(gè)元素開(kāi)始觸發(fā)，以及是否繼續(xù)向父元素傳播。理解這兩種機(jī)制對(duì)于有效地處理用戶(hù)交互非常重要。

事件冒泡（Event Bubbling）

事件冒泡是指事件從觸發(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ù)。

事件捕獲（Event Capturing）

事件捕獲是指事件從最外層的元素開(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ù)。這與事件冒泡的行為相反。

總結(jié)

  • 事件冒泡：從事件觸發(fā)元素開(kāi)始，向上逐級(jí)傳播到最外層元素。
  • 事件捕獲：從最外層元素開(kāi)始，向下逐級(jí)傳播到事件觸發(fā)元素。

你可以根據(jù)需要選擇使用事件冒泡或事件捕獲。通常，事件冒泡更常用，因?yàn)樗试S你在不直接操作觸發(fā)元素的情況下處理事件。然而，在某些特定場(chǎng)景下，事件捕獲可能更適合。

0 踩