JavaScript中的事件冒泡

Event bubbling in JavaScript

本文关键字：事件 JavaScript      更新时间：2023-09-26

关于冒泡的定义，我似乎有些不明白。

我知道事件冒泡意味着事件从内部元素传播到外部元素。我还知道，您可以使用addEventListener()的最后一个可选参数"选择"您的传播方式。

我不明白的是:

<body>
    <div id = "divi">
        <p id = "para">Paragraph</p>
    </div>
    <script>
        var elementd = document.getElementById('divi');
        elementd.addEventListener("click", MessageD);
        function MessageD(){
            alert('A message');
        }
    </script>
</body>

在这里，我给div元素附加了一个click事件。默认情况下，click事件正在冒泡，这意味着它正在通过DOM向上移动。但是当我点击我的段落时，点击事件被执行。

在我看来，这意味着click事件首先传播到"p"子元素，或者向下传播到DOM。有人能给我解释一下原因和发生了什么吗?谢谢!

——在一些答案后编辑——

也许通过这个例子可以更好地解释我的困扰:

<body>
    <style>
        #myDiv, #results {
            margin: 50px;
        }
        #myDiv {
            padding: 10px;
            width: 200px;
            text-align: center;
            background-color: #000;
        }
        #myDiv div {
            margin: 10px;
            background-color: #555;
        }
    </style>
    <div id="myDiv">
        <div>Text 1</div>
        <div>Text 2</div>
        <div>Text 3</div>
        <div>Text 4</div>
    </div>
    <div id="results"></div>
    <script>
        var myDiv = document.getElementById('myDiv'),
        results = document.getElementById('results');
        myDiv.addEventListener('mouseover', function() {
            results.innerHTML += "I'm in.<br />";
        }, false);
        myDiv.addEventListener('mouseout', function() {
            results.innerHTML += "I'm out.<br />";
        }, false);
    </script>
</body>

如果你试着运行这段代码，你会"out"answers"in"的任何时候你进入和退出一个子div…这意味着你将在子div中"in"

这是否意味着事件从父级传播到子级，或者向下传播?

——最终编辑——我终于明白了:我混淆了事件和事件处理程序。

事件只是一次点击，所以页面中的任何东西都可以接收到它。单击之后，这个单击事件将转到DOM的顶部，当它遇到单击事件处理程序时，将执行与事件处理程序相关联的函数。

谢谢大家!

在我看来，这意味着click事件首先传播到"p"子元素，或者向下传播到DOM。

。在这种情况下，p元素是事件的目标。事件传播到div元素。div元素有一个click处理程序，它被执行。

事件就是这样工作的。事件的目标是触发事件的元素，目标可以是您将侦听器附加到的元素，也可以是它的子/后代之一。event对象的target属性指的是事件的目标元素，当addEventListener用于附加事件侦听器时，处理程序的this值指的是处理程序的所有者，在本例中是div元素。

附加事件侦听器与事件的工作方式无关。每当用户单击时都会触发单击事件。作为开发人员，您需要附加一个事件侦听器来侦听为元素触发的特定事件。如果不附加侦听器，仍然会触发事件。

当您单击段落时，它不会在那里被处理，因此它会向上传播到div。如果使用此版本的代码，它会显示正在处理该事件的元素。提示是divi，而不是para。

var elementd = document.getElementById('divi');
elementd.addEventListener("click", MessageD);
function MessageD() {
  alert(this.id);
}
<div id="divi">
  <p id="para">Paragraph</p>
</div>

相关文章：