Question

关于冒泡的定义，我似乎无法理解。

我知道事件冒泡意味着事件从内部元素传播到外部元素。我也知道你可以使用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>

这里我将click事件附加到div元素。默认情况下，click事件是冒泡的，这意味着他正在通过DOM上升。但是当我点击我的段落时，会执行click事件。

据我所知，这意味着click事件首先传播到“p”子元素，或者DOWN 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>

如果您尝试运行此代码，只要您进入和退出子div，您就会“退出”和“进入”...这意味着您将在子div中“进入”。

这是不是意味着事件从父母传播到孩子，或者向下传播？

---最终编辑--- 我终于明白了：我在事件和事件处理程序之间产生了混淆。

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

谢谢大家！

Answer 1

据我所知，这意味着click事件首先传播到“p”子元素，或者DOWN DOM。

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

这就是事件的运作方式。事件的目标是触发事件的元素，目标可以是您附加侦听器的元素或其中一个子元素/后代元素。 target对象的event属性引用事件的目标元素，并且当addEventListener用于附加事件侦听器时，处理程序的this值引用所有者处理程序，在这种情况下是div元素。

您附加了事件监听器的事实与事件的工作方式无关。只要用户单击，就会触发单击事件。这是开发人员，它附加一个事件监听器来监听为元素触发的特定事件。如果未附加侦听器，则仍会触发该事件。

Answer 2

当你点击段落时，它没有被处理，所以它传播到DIV。如果您使用此版本的代码，它会显示正在处理事件的元素。提醒显示divi，而不是para。

＆＃13;

var elementd = document.getElementById('divi');

elementd.addEventListener("click", MessageD);

function MessageD() {
  alert(this.id);
}

＆＃13;

<div id="divi">
  <p id="para">Paragraph</p>
</div>

＆＃13;

在JavaScript中冒泡的事件

2 个答案: