DOM事件高级①(注册、删除事件)

举报
十八岁讨厌编程 发表于 2022/08/05 23:26:15 2022/08/05
【摘要】 文章目录 注册事件(绑定事件)注册事件概述addEventListener 事件监听方式attachEvent 事件监听方式注册事件兼容性解决方案 删除事件(解绑事件)删除事件的方式删除事件兼...

注册事件(绑定事件)

注册事件概述

给元素添加事件,称为注册事件或者绑定事件。
注册事件有两种方式:

  • 传统方式
  • 方法监听注册方式

①传统注册方式

  • 利用 on 开头的事件 onclick
  • <button οnclick=“alert(‘hi~’)”></button>
  • btn.onclick = function() {}
  • 特点: 注册事件的唯一性
  • 同一个元素同一个事件只能设置一个处理函数,最后注册的处理函数将会覆盖前面注册的处理函数

②方法监听注册方式

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

addEventListener 事件监听方式

语法:

eventTarget.addEventListener(type, listener[, useCapture])

  
 
  • 1

eventTarget.addEventListener()方法将指定的监听器注册到 eventTarget(目标对象)上,当该对象触发指定的事件时,就会执行事件处理函数。

该方法接收三个参数:

  • type:事件类型字符串,比如 click 、mouseover ,注意这里不要带on
  • listener:事件处理函数,事件发生时,会调用该监听函数
  • useCapture:可选参数,是一个布尔值,默认是 false。

例如:

<script>
        var btns = document.querySelectorAll('button');
            // 事件侦听注册事件 addEventListener 
            // (1) 里面的事件类型是字符串 必定加引号 而且不带on
            // (2) 同一个元素 同一个事件可以添加多个侦听器(事件处理程序)
        btns[1].addEventListener('click', function() {
            alert(22);
        })
        btns[1].addEventListener('click', function() {
                alert(33);
            })
            // 3. attachEvent ie9以前的版本支持
        btns[2].attachEvent('onclick', function() {
            alert(11);
        })
    </script>

  
 
  • 1
  • 2
  • 3
  • 4
  • 5
  • 6
  • 7
  • 8
  • 9
  • 10
  • 11
  • 12
  • 13
  • 14
  • 15
  • 16

attachEvent 事件监听方式

eventTarget.attachEvent(eventNameWithOn, callback)

  
 
  • 1

eventTarget.attachEvent()方法将指定的监听器注册到 eventTarget(目标对象) 上,当该对象触发指定的事件时,指定的回调函数就会被执行。

该方法接收两个参数:

  • eventNameWithOn:事件类型字符串,比如 onclick 、onmouseover ,这里要带 on
  • callback: 事件处理函数,当目标触发事件时回调函数被调用

注意:IE8 及早期版本支持

例如:

        btns[2].attachEvent('onclick', function() {
            alert(11);
        })

  
 
  • 1
  • 2
  • 3

注册事件兼容性解决方案

function addEventListener(element, eventName, fn) {
   // 判断当前浏览器是否支持 addEventListener 方法
   if (element.addEventListener) {
   element.addEventListener(eventName, fn); // 第三个参数 默认是false
   } else if (element.attachEvent) {
   element.attachEvent('on' + eventName, fn);
   } else {
   // 相当于 element.onclick = fn;
   element['on' + eventName] = fn;
 }

  
 
  • 1
  • 2
  • 3
  • 4
  • 5
  • 6
  • 7
  • 8
  • 9
  • 10

兼容性处理的原则: 首先照顾大多数浏览器,再处理特殊浏览器

删除事件(解绑事件)

删除事件的方式

  1. 传统注册方式

eventTarget.onclick = null;

  1. 方法监听注册方式

① eventTarget.removeEventListener(type, listener[, useCapture]);
② eventTarget.detachEvent(eventNameWithOn, callback);

例如:
场景:触发一个事件之后,再触发不会有相应

<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) // 里面的fn 不需要调用加小括号

        function fn() {
            alert(22);
            divs[1].removeEventListener('click', fn);
        }
        // 3. detachEvent
        divs[2].attachEvent('onclick', fn1);

        function fn1() {
            alert(33);
            divs[2].detachEvent('onclick', fn1);
        }
    </script>
</body>

  
 
  • 1
  • 2
  • 3
  • 4
  • 5
  • 6
  • 7
  • 8
  • 9
  • 10
  • 11
  • 12
  • 13
  • 14
  • 15
  • 16
  • 17
  • 18
  • 19
  • 20
  • 21
  • 22
  • 23
  • 24
  • 25
  • 26
  • 27

注意:删除事件的时候,不要使用匿名函数,否则不方便删除,建议可以把方法单独给拿出来。

删除事件兼容性解决方案

function removeEventListener(element, eventName, fn) {
   // 判断当前浏览器是否支持 removeEventListener 方法
   if (element.removeEventListener) {
   element.removeEventListener(eventName, fn); // 第三个参数 默认是false
   } else if (element.detachEvent) {
   element.detachEvent('on' + eventName, fn);
   } else {
   element['on' + eventName] = null;
 }

  
 
  • 1
  • 2
  • 3
  • 4
  • 5
  • 6
  • 7
  • 8
  • 9

文章来源: blog.csdn.net,作者:十八岁讨厌编程,版权归原作者所有,如需转载,请联系作者。

原文链接:blog.csdn.net/zyb18507175502/article/details/123797743

【版权声明】本文为华为云社区用户转载文章,如果您发现本社区中有涉嫌抄袭的内容,欢迎发送邮件进行举报,并提供相关证据,一经查实,本社区将立刻删除涉嫌侵权内容,举报邮箱: cloudbbs@huaweicloud.com
  • 点赞
  • 收藏
  • 关注作者

评论(0

0/1000
抱歉,系统识别当前为高风险访问,暂不支持该操作

全部回复

上滑加载中

设置昵称

在此一键设置昵称,即可参与社区互动!

*长度不超过10个汉字或20个英文字符,设置后3个月内不可修改。

*长度不超过10个汉字或20个英文字符,设置后3个月内不可修改。