html 子元素和父元素都监听了 click 事件，点击子元素时为何先触发的是父元素的 click 事件？

先上一段代码，点击子元素时先触发的是父元素的 click 事件

<html>
    <head>
        <script type="text/javascript">
            function onLoads(){
                document.getElementById("div1").addEventListener("click",(e) => {
                    alert('1');
                }, true);

                document.getElementById("div2").addEventListener("click",(e) => {
                    alert('2');
                }, true);
            }
        </script>
    </head>
    <body onload="onLoads()">
        <div id="div1"   style="width:400px;height:400px;background-color:red;border:1px;float:left; z-index:1;" >
            <div id="div2"  style="width:50px;height:50px;background-color:blue;float:left; z-index:2;"  ></div>
        </div>
    </body>
</html>

点击蓝色代码时会先弹出 1，然后弹出2; 说明先父元素事件先触发，然后是子元素事件触发

看了文档后瞬间明朗了：

语法

element.addEventListener( event, function, useCapture)

参数值

参数	描述
event	必须。字符串，指定事件名。注意: 不要使用 "on" 前缀。例如，使用 "click" ,而不是使用 "onclick"。提示：所有 HTML DOM 事件，可以查看我们完整的 HTML DOM Event 对象参考手册。
function	必须。指定要事件触发时执行的函数。当事件对象会作为第一个参数传入函数。事件对象的类型取决于特定的事件。例如， "click" 事件属于 MouseEvent(鼠标事件) 对象。
useCapture	可选。布尔值，指定事件是否在捕获或冒泡阶段执行。可能值: true - 事件句柄在捕获阶段执行 false- false- 默认。事件句柄在冒泡阶段执行

addEventListener 主要在第三个参数上面，

冒泡阶段：这类似与池塘里的涟漪，从事件中心点，向上层传播。而事件捕获和这个顺序正好相反。

所以，如果想要点击事件从子元素->父元素这样的顺序传递的话，改下参数即可

<script type="text/javascript">
            function onLoads(){
                document.getElementById("div1").addEventListener("click",(e) => {
                    alert('1');
                }, false);

                document.getElementById("div2").addEventListener("click",(e) => {
                    alert('2');
                }, false);
            }
</script>

如果，点击了子元素，不想点击事件向上冒泡的话，可以这样处理

<script type="text/javascript">
            function onLoads(){
                document.getElementById("div1").addEventListener("click",(e) => {
                    alert('1');
                    e.cancelBubble = true;
                }, false);

                document.getElementById("div2").addEventListener("click",(e) => {
                    alert('2');
                    e.cancelBubble = true;
                }, false);
            }
</script>

或者

<script type="text/javascript">
            function onLoads(){
                document.getElementById("div1").addEventListener("click",(e) => {
                    alert('1');
                    e.stopPropagation();
                }, false);

                document.getElementById("div2").addEventListener("click",(e) => {
                    alert('2');
                    e.stopPropagation();
                }, false);
            }
</script>

html 子元素和父元素都监听了 click 事件，点击子元素时为何先触发的是父元素的 click 事件？

语法

参数值

猜你喜欢