js第三种添加事件监听的方法

最新推荐文章于 2024-12-09 22:08:46 发布

原创最新推荐文章于 2024-12-09 22:08:46 发布 · 7.6k 阅读

3 ·

CC 4.0 BY-SA版权

文章标签：

#js #addEventListener监听

JS学习专栏收录该内容

33 篇文章

订阅专栏

本文通过一个具体的实例演示了如何使用addEventListener方法为DOM元素添加事件监听器，并对比了捕获阶段与冒泡阶段的区别。同时介绍了如何阻止事件传播及移除已添加的事件监听。

前面写过在元素标签里写onclick();和获取元素通过js添加onclick,这次记addEventListener方法

上一篇记事件响应链的时候记了两个div的嵌套时响应问题(响应链),这次还用嵌套来记addEventListener

先准备好两个嵌套的div,并设置不同的背景色和大小

</div>

设置css:

 
#outer {
            width: 100px;
            height: 100px;
            background-color: red;
        }

        #inner {
            width: 50px;
            height: 50px;
            background-color: blue;
        }

js代码:

<script>
    var outer = document.getElementById("outer");
    var inner = document.getElementById("inner");

    // 元素对象的addEventListener方法,为元素添加一个事件监听,第一个参数是要监听的事件类型,第二个参数是事件函数,第三个参数可选,是否在捕获阶段监听,默认为false;
    // 相比于前两种监听方法,这种方法可以为同一个元素的同一个事件添加多个事件函数
    outer.addEventListener("click",function(e){
        console.log("outer捕获阶段");
        // e.stopPropagation();
    },true);

    outer.addEventListener("click",function(e){
        console.log("outer冒泡阶段");
    },false);

    function f1(e){
        console.log("inner捕获阶段");
    }

    inner.addEventListener("click",f1,true);

    inner.addEventListener("click",function(e){
        console.log("inner冒泡阶段");
    },false);

    // 在事件响应链中任何阶段都可以阻止事件的传播

    // removeEventListener移除已经添加过的事件监听
    inner.removeEventListener("click",f1,true);