JS的DOM注册事件和删除事件

最新推荐文章于 2024-05-15 22:16:44 发布

黑马金牌编程

最新推荐文章于 2024-05-15 22:16:44 发布

阅读量562

点赞数

分类专栏：前端web开发文章标签： javascript 前端开发语言

本文链接：https://blog.csdn.net/gyqailxj/article/details/122506722

版权

前端web开发专栏收录该内容

48 篇文章 6 订阅

订阅专栏

1.注册事件（绑定事件）

1.1注册事件概述

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

传统注册方式

利用on开头的事件onclick

btn.onclick = function() {}
特点:注册事件的唯一性
同一个元素同一个事件只能设置-个处理函数,最后注册的处理函数将会覆盖前面注册的处理函数

方法监听注册方式

w3c标准推荐方式
addEventListener()它是一一个方法
IE9之前的IE不支持此方法,可使用attachEvent0代替
特点:同一个元素同一个事件可以注册多个监听器
按注册顺序依次执行

1.2 addEventListener事件监听方式

在这里插入图片描述

注意：

(1) 里面的事件类型是字符串必定加引号而且不带on
(2)同一个元素同一个事件可以添加多个侦听器(事件处理程序)

1.4注册事件兼容性解决方案

在这里插入图片描述

兼容性处理的原则：首先照顾大多数浏览器，在处理特殊浏览器

2.删除事件（解绑）

2.1删除事件的方式

1.传统注册方式

eventTarget.onclick  = null;

2.方法监听注册方式

①eventTarget . remove EventListener (type，listener [，useCapture]) ;

<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;
        }
        divs[1].addEventListener('click',fn)//里面的fn 不需要调用加小括号
          
        function fn(){
            alert(22);
            divs[1].removeEventListener('click',fn);
        }
        //3.
        divs[2].attachEvent('onclick',fn1)
          
        function fn1(){
            alert(33);
            divs[2].removeEventListener('onclick',fn1);
        }
        
    </script>

2.2删除事件兼容性解决方案

在这里插入图片描述

黑马金牌编程

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
打赏
0
评论
JS的DOM注册事件和删除事件

1.注册事件（绑定事件）1.1注册事件概述给元素添加事件，称为注册事件或者绑定事件。注册事件有两种方式：传统方式和方法监听注册方式传统注册方式利用on开头的事件onclickbtn.onclick = function() {}特点:注册事件的唯一性同一个元素同一个事件只能设置-个处理函数,最后注册的处理函数将会覆盖前面注册的处理函数方法监听注册方式w3c标准推荐方式addEventListener()它是一一个方法IE9之前的IE不支持此方法,可使用attachEven
复制链接

扫一扫