JavaScript中注册、删除事件

最新推荐文章于 2024-01-07 20:42:36 发布

小码哥呀

最新推荐文章于 2024-01-07 20:42:36 发布

阅读量301

点赞数

分类专栏： JavaScript 文章标签： javascript 开发语言 ecmascript

本文链接：https://blog.csdn.net/qq_46112274/article/details/122139606

版权

JavaScript 专栏收录该内容

50 篇文章 1 订阅

订阅专栏

1、注册事件

1.1、注册事件概述

在这里插入图片描述

1.1.1、传统注册事件-没有兼容性问题

在这里插入图片描述

1.1.2、addEventLinstener事件监听方式

在这里插入图片描述

// 2、事件监听注册事件 addEventListener
// (1)里面的事件类型是字符串 必定夹引号 并且不带on
 // (2)同一个元素 同一个事件可以添加多个侦听器(事件处理程序)
 btns[1].addEventListener('click',function(){
     alert(22);
 })
 btns[1].addEventListener('click',function(){
     alert(33);
 })

1.1.3、attachEvent事件监听方式

在这里插入图片描述

打开ie浏览器，找到仿真-文档模式，调整ie版本为8。在这里插入图片描述

// 3、attachEvent ie9以前的版本支持
   btns[2].attachEvent('onclick',function(){
       alert(11);
   })

在这里插入图片描述

1.1.4、注册事件兼容性解决方案

在这里插入图片描述
以后开发中首选addEventListener方式，然后再选择传统的监听方式onclick。

2、删除事件的三种方式

在这里插入图片描述

<!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>
        div {
            width: 100px;
            height: 100px;
            background-color: pink;
        }
    </style>
</head>
<body>
    <div>1</div>
    <div>2</div>
    <div>3</div>
    <script>
        var divs = document.querySelectorAll('div');
        divs[0].onclick = function(){
            alert('11');
            // 1、传统方式删除事件
            divs[0].onclick = null;
        }
        // 2、removeEventListener删除事件
        // divs[1].addEventListener('click',fn);
        // function fn(){
        //     alert(22);
        //     divs[1].removeEventListener('click',fn);
        // }
        // 3、detachEvent  ie9以前才支持
        divs[2].attachEvent('onclick',fn1);
        function fn1(){
            alert(33);
            divs[2].detachEvent('onclick',fn1);
        }
    </script>
</body>
</html>