js中监听注册事件addEventListener的使用

爬楼梯的小新

已于 2022-01-27 10:24:33 修改

阅读量976

点赞数

分类专栏： JavaScript 文章标签： javascript 前端

于 2022-01-25 11:36:02 首次发布

本文链接：https://blog.csdn.net/weixin_57607714/article/details/122681983

版权

JavaScript 专栏收录该内容

86 篇文章 4 订阅

订阅专栏

语法：

element.addEventListener('type',function()[,useCapture])

将指定的监听器注册到element（目标对象）上，当对该对象触发指定的事件时，就会执行事件处理函数

type：事件类型字符串如：click mouseover(鼠标经过) 等注意这里不要加on！

useCapture：可写可不写参数是一个布尔值默认是false

特点：同一个元素同一个事件可以注册多个监听器但是使用传统的element.onclick = function(){} 一个事件只能注册一个点击函数

案例：此时点击btn 会相继弹出两个对话框但是使用传统方式onclick 只会显示第二个‘你好2’ 因为会把第一个覆盖掉

<body>
    <button>提交</button>
</body>
<script>
    var btn = document.querySelector('button');
    btn.addEventListener('click', function() {
        alert('你好');
    })
    btn.addEventListener('click', function() {
        alert('你好2');
    })
</script>

上面只讲了括号里的两个参数下面就来讲第三个参数useCapture的使用方法 默认fasle

element.addEventListener('type',function()[,useCapture])

第三个参数如果是true 表示在事件捕获阶段如果是false 表示事件在冒泡阶段

注：实际开发中很少使用事件捕获更关注的事件冒泡

冒泡和捕获只能写其中一个 useCapture要么默认false 要么true

有些事件是没有冒泡的如oblur onfous onmouseenter onmouseleave

案例：

<body>
    <div class="father">
        father
        <div class="son">son</div>
    </div>
    <script>
        //冒泡阶段 点击son盒子 先弹出son 后弹father
        //son ->father->body->html->document
        var father = document.querySelector('.father');
        var son = document.querySelector('.son');
        father.addEventListener('click', function() {
            alert('father')
        }, false)
        son.addEventListener('click', function() {
            alert('son')
        }, false)

        //捕获阶段 点击son盒子 先弹出father 后弹son
        //document->html->body->father->son
        // var father = document.querySelector('.father');
        // var son = document.querySelector('.son');
        // father.addEventListener('click', function() {
        //     alert('father')
        // }, true)
        // son.addEventListener('click', function() {
        //     alert('son')
        // }, true)
    </script>
</body>