注册事件（两种方式）

最新推荐文章于 2024-11-10 16:55:19 发布

原创最新推荐文章于 2024-11-10 16:55:19 发布 · 2.2k 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#js

本文介绍了JavaScript中注册事件的两种方式：传统方式，通过on开头的事件属性如onclick；以及监听方式，使用addEventListener或attachEvent（IE9前）。传统方式注册的事件处理函数具有唯一性，而监听方式允许多个处理函数并按注册顺序执行。同时提到了事件解绑的概念。

注册事件（两种方式）

给元素添加事件，称为注册事件或者绑定事件。
注册事件有两种方式：传统注册方式和监听注册方式。

传统注册方式

利用on开头的事件 onclick
btn.onclick = function(） {}
特点：注册事件的唯一性
同一元素同一事件只能设置一个处理函数，最后注册的处理函数讲覆盖前面注册的处理函数。

监听注册方式

addEventListener() 它是一个方法
IE9 之前不支持此方法，可使用attachEvent（）代替
特点：同一个元素同一个事件可以注册多个监听事件
按照注册顺序一次执行
-eventTarget.addEventListener()方法将指定的监听器注册到 eventTarget（目标对象）上，当该对象触发指定的事件时，就会执行事件处理函数。

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>

<body>
    <button>传统注册方式</button>
    <button>方法监听注册事件</button>
    <script>
        //传统方式
        var btns = document.querySelectorAll('button');
        btns[0].onclick = function () {
            console.log('我是传统注册事件');
        }
        //方法监听注册事件
        btns[1].addEventListener('click', function () {
            console.log('我是方法监听事件');
        })
    </script>
</body>

</html>

当我们注册事件过后，不需要它的时候，可以删除它就是解绑事件

//传统方式解绑
btns[0].onclick = null;

//监听事件解绑
removeEventListener ()