js日记之注册与删除事件

最新推荐文章于 2022-05-10 00:12:00 发布

小白白中之白

最新推荐文章于 2022-05-10 00:12:00 发布

阅读量154

点赞数

分类专栏： JS

本文链接：https://blog.csdn.net/m0_53438035/article/details/116375529

版权

JS 专栏收录该内容

41 篇文章 0 订阅

订阅专栏

一：传统注册方式

on开头的事件，例如onclick
特点：注册事件的唯一性（同一个元素同一个事件只能设置一个处理函数，最后注册的处理函数将会覆盖前面注册的处理函数）
代码：

效果：

二：方法监听注册方式

addEventListener(‘事件’,函数)
特点：同一个元素同一个事件可以注册多个监听器，按照注册顺序依次执行；IE9+（之前使用）

一&二代码：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style type="text/css">
    button{
        width: 100px;
        height: 30px;
    }
    </style>
</head>
<body>
    <button>传统</button>
    <button>监听</button>
    <script>
        var buttons=document.querySelectorAll('button')
        buttons[0].onclick=function(){
            alert('lala')
        }
        buttons[0].onclick=function(){
            alert('haha')
        }
        buttons[1].addEventListener('click',function(){
            alert("ddd")
        })
        buttons[1].addEventListener('click',function(){
            alert("dididi")
        })
    </script>
</body>
</html>

效果：不便展示

经过实验。我们发现onclick只能触发一次，触发的为最后一次。但addEventListener可以连续触发两次

三：传统删除事件

element.事件=null;例如div.οnclick=null

四：方式监听移除事件

removeEventListener(‘事件’,函数名)
注意：函数通过匿名函数的方式注册的移除不了
代码：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style type="text/css">
    button{
        width: 100px;
        height: 30px;
    }
    </style>
</head>
<body>
    <button></button>
    <script>
        var buttons=document.querySelectorAll('button')
        buttons[0].addEventListener('click',fn);
        function fn(){
            alert('lalalala');
            buttons[0].removeEventListener('click',fn);
        }
    </script>
</body>
</html>