JavaScript 中的事件冒泡

Question

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

我知道事件冒泡是指事件从内部元素传播到外部元素。我还知道您可以 "choose" 使用 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 元素。默认情况下，点击事件是冒泡的，也就是说他是通过DOM往上走。但是当我点击我的段落时，会执行点击事件。

根据我的理解，这意味着点击事件首先传播到 "p" child 元素，或者向下传播到 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>

如果您尝试运行此代码，您将在任何时候进入和退出 child div.. .意味着你将在 child divs."in".

这是否意味着事件从 parent 传播到 child 或向下传播？

--- 最终编辑 --- 我终于明白了：我把事件和事件处理器搞混了。

一个事件就是一次点击，因此页面中的任何内容都可以接收到它。单击后，此单击事件将转到 DOM 的顶部，当它遇到单击事件处理程序时，将执行与事件处理程序关联的函数。

谢谢大家！

Answer 1

To my understanding, that means that the click event propagates to the "p" child element first, or DOWN the DOM.

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

这就是活动的运作方式。事件的目标是触发事件的元素，目标可以是您已附加侦听器的元素或其之一 children/descendants。 event 对象的 target 属性指的是事件的目标元素，当 addEventListener 用于附加事件侦听器时，处理程序的 this 值指处理程序的所有者，在本例中为 div 元素。

您已附加事件侦听器这一事实与事件的工作方式无关。每当用户单击时都会触发单击事件。是您，开发人员，附加了一个事件侦听器，用于侦听为元素触发的特定事件。如果您不附加侦听器，事件仍会被触发。

Answer 2

当您单击该段落时，它不会在那里被处理，因此它会传播到 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>

JavaScript 中的事件冒泡

Event bubbling in JavaScript

javascript

events

event-bubbling