DOM事件监听 ---- 注册事件（常用） ---- 删除事件（常用）

最新推荐文章于 2024-03-06 14:22:32 发布

忧郁火龙果

最新推荐文章于 2024-03-06 14:22:32 发布

阅读量582

点赞数

分类专栏： JS基础文章标签： javascript 前端 html

本文链接：https://blog.csdn.net/LQlove1/article/details/125363392

版权

JS基础专栏收录该内容

20 篇文章 0 订阅

订阅专栏

一、addEventListener（）

相对于带on的它可以给同一个元素注册多个事件，不会被覆盖，但是不支持i9一下的，最近ie也退出江湖了
补充：带on的注册事件一个元素只能注册一个事件

代码演示：

<!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>
</head>
<body>
    <button>输出是谁注册的事件</button>
    <script>
        var btn = document.querySelector('button');
        btn.addEventListener('click' , alertMsg) ;
        // 封装一个函数功能
        function alertMsg(){
            alert('我是addEventListener');
        }
    </script>
</body>
</html>

展示结果：
请添加图片描述

二、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>
</head>
<body>
    <button>输出是谁注册的事件</button>
    <script>
        var btn = document.querySelector('button');
        // 点击事件
        btn.addEventListener('click' , reAlertmsg) ;
        // 封装一个鼠标点击功能
        function reAlertmsg(){
        // 删除事件
            btn[0].removeEventListener('click',reAlertmsg)
            alert('鼠标点击过');
        }
        
        
    </script>
</body>
</html>