Question

我正在学习JavaScript事件冒泡和捕获阶段。这样做我遇到了一个问题。这是代码：

<html>
    <body>    
        <p id="para">Learning <span id="span"><b>events</b></span></p>
        <script>
            document.getElementById("para").addEventListener("click",function(){
                                                          alert("Paragraph was clicked");
                                                               },true);
             document.getElementById("span").addEventListener("click",function(){
                                                          alert("Span was clicked");
                                                               },false);                                                 
        </script>    
    </body>
</html>

问题是当我点击 span 元素时，段落元素上的警告首先触发，然后触发 span 上的警报。我认为这可能是因为我在段落元素上设置的捕获阶段。我的问题是关于原因。为什么这样做？根据定义，它应首先触发跨越事件，然后是段落上的事件。

提前致谢...

Answer 1

是的，这是因为您已明确设置<p>标记上的事件以在捕获阶段执行。

由于捕获阶段首先发生，因此该事件处理程序首先执行。

由于您已将span上的事件侦听器设置为在冒泡阶段执行（通过在第三个参数中提供false），因此它将在段落标记的处理程序之后执行。

以下是对capturing phase如何运作的一个很好的解释。

捕获阶段主导泡沫阶段

1 个答案: