JavaScript 事件冒泡与捕获咋使用

在 JavaScript 中，事件冒泡和事件捕获是两种事件传播的机制。它们决定了事件从哪个元素开始触发，以及是否继续向父元素传播。理解这两种机制对于有效地处理用户交互非常重要。

事件冒泡（Event Bubbling）

事件冒泡是指事件从触发元素开始，逐级向上传播到最外层的元素。在这个过程中，每个元素的事件处理函数都会被调用。通常，我们会在文档的根元素（如 window 或 document）上监听事件，以便在事件冒泡过程中捕获到该事件。

使用事件冒泡的示例：

<
    !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>
    

在这个示例中，当你点击内部的 div 时，它会触发 handleEvent 函数，并显示一个警告框，表明事件触发在 div 元素上。由于事件冒泡，点击外部 div 也会触发该函数。

事件捕获（Event Capturing）

事件捕获是指事件从最外层的元素开始，逐级向下传播到触发元素的阶段。在这个过程中，每个元素的事件处理函数都会被调用。你可以使用 addEventListener 方法的第三个参数来指定是否使用事件捕获。

使用事件捕获的示例：

<
    !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>
    

在这个示例中，当你点击内部的 div 时，会先触发外部 div 的捕获事件处理函数，然后触发内部 div 的捕获事件处理函数。这与事件冒泡的行为相反。

总结

• 事件冒泡：从事件触发元素开始，向上逐级传播到最外层元素。
• 事件捕获：从最外层元素开始，向下逐级传播到事件触发元素。

你可以根据需要选择使用事件冒泡或事件捕获。通常，事件冒泡更常用，因为它允许你在不直接操作触发元素的情况下处理事件。然而，在某些特定场景下，事件捕获可能更适合。

声明：本文内容由网友自发贡献，本站不承担相应法律责任。对本内容有异议或投诉，请联系2913721942#qq.com核实处理，我们将尽快回复您，谢谢合作！