addEventListener事件监听方式

mewgulfszd！

已于 2022-06-30 15:21:17 修改

阅读量1.1k

点赞数

文章标签：前端 javascript

于 2022-06-30 12:45:42 首次发布

本文链接：https://blog.youkuaiyun.com/CLhen/article/details/125538153

版权

eventTarget.addEventListener(type,listener[,useCapture])

eventTarget.addEventListener()方法将指定的监听器注册到eventTarget（目标对象）上，当该对象触发指定的事件时，就会执行事件处理函数。

该方法接收三个参数：

type：事件类型字符串，比如click、mouseover，注意不用带on。
listener：事件处理函数，事件发生时，会调用该监听函数。
useCapture：可选参数，是一个布尔值，默认是false。当值为true时，是捕获阶段，顺序为document -> html -> body -> 父级元素 ->子级元素。当值为false时，是冒泡阶段，顺序和true相反，子级元素 -> 父级元素 -> body ->html -> document。开发中一般使用冒泡，少使用捕获。

<body>
    <button>监听注册</button>
    <script>
        var btn=document.querySelector('button')
        // 同一个元素同一个事件可添加多个监听器（事件处理程序）
        // 传统方式具有唯一性，同一个元素同一个事件只能设置一个处理函数
        // 如果有多个，后面注册的处理函数会覆盖前面注册的处理函数
        btn.addEventListener('click',function(){
            alert('1');
        })
        btn.addEventListener('click',function(){
            alert('2');
        })
    </script>
</body>

一些事件没有冒泡，比如onblur、onfocus、onmouseover、onmouseleave。