addEventListener 事件监听方式

最新推荐文章于 2024-07-01 16:22:16 发布

DazzlingWen.

最新推荐文章于 2024-07-01 16:22:16 发布

阅读量1.6k

点赞数

文章标签： javascript safari 前端

本文链接：https://blog.csdn.net/qq_52372698/article/details/122774459

版权

语法规范：

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

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

事件监听注册事件：

（1）addEventListener里面的事件类型是字符串，必定加引号，而且不带on

后面的function()处理函数也成为监听器

（2）同一个元素，同一个事件可以添加多个侦听器（事件处理程序）

该方法接收三个参数：

type：事件类型字符串，比如click、mouseover，注意这里不要带on
listener：事件处理函数，事件发生时，会调用该监听函数
useCapture：可选参数，是一个布尔值，默认是false

案例理解：

<body>
    <button>事件1</button>
    <button>事件2</button>
    <script>
        var btns = document.querySelectorAll('button');
        btns[0].onclick = function () {
            alert('hi');
        }
        //后面的事件会覆盖掉前面的
        btns[0].onclick = function () {
            alert('hello');
        }


        btns[1].addEventListener('click', function () {
            alert(22);
        })
        btns[1].addEventListener('click', function () {
            alert(33);
        })
        //但是这种方式可以添加多个，不会有覆盖的情况
    </script>
</body>

但是这种方法存在兼容性问题

DazzlingWen.

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
addEventListener 事件监听方式

addEventListener 事件监听方式
复制链接

扫一扫