注册事件的两种方式

最新推荐文章于 2022-07-07 11:30:40 发布

Var521

最新推荐文章于 2022-07-07 11:30:40 发布

阅读量645

点赞数 1

文章标签： javascript

本文链接：https://blog.csdn.net/Var521/article/details/104663650

版权

1.传统的注册方式

element.onclick = function(){}
<button onclick="alret('你好呀')"></button>
特点：传统的注册方式具有唯一性，即同一个元素同一事件只能设置一个函数，如果写了多个函数，最后一个函数会把之前的函数都覆盖掉。
证明：

<body>
    <button>传统注册事件</button>
    <button>方法监听注册事件</button>
    <button>ie9 attachEvent</button>
    <script>
        var btns = document.querySelector('button');
        btns[0].onclick = function(){
            alert('传统注册事件');
        }
    </script>
</body>

结果：
在这里插入图片描述

<body>
    <button>传统注册事件</button>
    <button>方法监听注册事件</button>
    <script>
        var btns = document.querySelectorAll('button');
        btns[0].onclick = function(){
            alert('传统注册事件');
        }
        btns[0].onclick = function(){
            alert('王也道长好');
        }
    </script>
</body>

结果： 第二个函数把前一个覆盖掉了
在这里插入图片描述

2.方法监听注册方式

addEventListener监听函数： eventTarget.addEventListener(type,listener[,useCapture]);

其中函数的三个属性的含义分别是
type: 事件类型是字符串类型，如’click’、‘mouseover’，所以事件都要加单引号，注意这里不要带on。
listener： 事件处理函数，事件发生时，会调用这个函数。
useCapture： 可选参数，是一个Boolean类型，默认是false。

下面代码是同一个元素添加了两个事件处理程序：

<body>
    <button>传统注册事件</button>
    <button>方法监听注册事件</button>
    <script>
        var btns = document.querySelectorAll('button');
        btns[1].addEventListener('click',function(){
            alert("王也就是道");
        });
        btns[1].addEventListener('click',function(){
            alert("王也就是理");
        })
    </script>
</body>

结果：会依次显示每个监听事件

在这里插入图片描述

Var521

关注

1
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
注册事件的两种方式

1.传统的注册方式element.onclick = function(){}<button onclick="alret('你好呀')"></button>特点：传统的注册方式具有唯一性，即同一个元素同一事件只能设置一个函数，如果写了多个函数，最后一个函数会把之前的函数都覆盖掉。证明：<body> <button>传统注册事件...
复制链接

扫一扫