第九课 事件冒泡、捕获

<ul onclick="alert(this.nodeName)">
    <li onclick="alert(this.nodeName)">这是第一个</li>   <!--点击这里触发点击事件后会执行父级事件，称之为冒泡，从内向外-->
</ul>

 

延伸，普通的事件触发只能一次触发，如下代码，只能执行最后一次事件

<button id="but">点击试试</button>
<script>
    var but=document.getElementById("but");
    but.onclick=function () {
        alert("显示1");
    };
    but.onclick=function (ev) {
        alert("显示2");
    }
</script>

 

如果想要多个事件都被执行，那么用addEventListener方法，如下

<ul>
    <li id="li">这是第一个</li>
</ul>
    <script>
        var a=document.getElementById("li");
        a.addEventListener('click',function (ev) {
            alert("点击显示");
        },false);
        a.addEventListener('click',function (ev) {
            alert("第二次");
        },false)
    </script>

核心核心核心，冒泡和捕获的测试方法，仍然是这个函数addEventListener，函数具体说明https://www.runoob.com/jsref/met-element-addeventlistener.html

element.addEventListener(event, function, useCapture)

 

参数值

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

 

测试代码

<div id="one">
    <div id="two">
        <div id="three">
            <input type="button" value="click">
        </div>
    </div>
</div>
<script>
    var two =document.getElementById("two");
    two.addEventListener('click',function (ev) {
        alert("two");
    }); //在这里分别添加false和true属性来测试，不填写默认是false,true为捕获时触发，false为冒泡时触发

    var three=document.getElementById("three");
    three.addEventListener('click',function (ev) {
        alert("three");
    });
</script>