传统注册事件和监听事件的区别

最新推荐文章于 2024-05-02 21:17:26 发布

weixin_43520992

最新推荐文章于 2024-05-02 21:17:26 发布

阅读量482

点赞数 1

文章标签：学习 javascript 前端

本文链接：https://blog.csdn.net/weixin_43520992/article/details/123884829

版权

传统方式注册事件具有唯一性,同一个元素的同类型事件会被后面的覆盖

<body>
    <button>传统注册事件</button>
  btn.onclick = function () {
            alert('传统方式注册事件')
            // 删除传统事件
            btn.onclick = null;
        }
        //传统方式给同一个元素添加同样的事件，只会执行最后一个
        btn[0].onclick = function () {
            alert('传统方式注册事件会被覆盖')
            // 删除传统事件
            btn.onclick = null;
        }
    <script>

addEventListener事件监听方式: 同一个元素同一个事件可以添加多个侦听器(事件处理程序)

语法格式：eventTarget.addEventListener(type,listener[,useCapture])
该方法接收三个参数：
1.type：事件类型字符串，比如click、mouseover,注意这里不要带on
2.listener:事件处理函数，事件发生时，会调用该监听函数
3.useCapture:可选参数，是一个布尔值，默认false

<body>
    <button>方法监听注册事件</button>
    <script>
    // 2.事件监听注册事件
        // (1)里面的事件类型是字符串 必定加引号 而且不带on
        // (2)同一个元素 同一个事件可以添加多个侦听器(事件处理程序)
        // (3)这里会先弹出11然后再弹出22
        var btn = document.querySelectorAll('button');
        btn.addEventListener('click', function () {
            alert(11);
        })
        btn.addEventListener('click', function () {
            alert(22)
        })
           </script>
</body>

weixin_43520992

关注

1
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
传统注册事件和监听事件的区别

传统方式注册事件具有唯一性,同一个元素的同类型事件会被后面的覆盖<body> <button>传统注册事件</button> btn.onclick = function () { alert('传统方式注册事件') // 删除传统事件 btn.onclick = null; } //传统方式给同一个元素添加同样的事件，只会执行最后一个
复制链接

扫一扫