js中removeEventListener和detachEvent

最新推荐文章于 2023-09-17 02:26:06 发布
最新推荐文章于 2023-09-17 02:26:06 发布
阅读量576 收藏
点赞数
分类专栏： JavaScript 文章标签： javascript html5
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/Amor__xiaowang/article/details/103971918
版权

1. removeEventListener(type,listener,useCapture)

  • type: 事件类型,比如 click
  • listener: 监听器 必须是一个实现了 EventListener 接口的对象，或者是一个函数。
  • useCapture: 可选 第三个参数是一个布尔值，指定是使用事件冒泡还是事件捕获。不写,默认false

2. detachEvent(type,listener);

  • type: 事件类型,比如 click
  • listener: 监听器 必须是一个实现了 EventListener 接口的对象，或者是一个函数。
<body>
	<input type="button" value="点击" id="btn">
</body>
<script src="../commons.js"></script>
<script>
var btn = my$('btn');

function btnClick() {
    alert('hello');
    //删除事件
    myRemoveEventListener(btn, 'click', btnClick);
}
//自定义添加事件
myAddEventListener(btn, 'click', btnClick);
</script>

commons.js

/*获取id元素*/
function my$(id) {
    return document.getElementById(id);
}

//处理注册事件的兼容性问题
//eventName ,不带on click  mouseover mouseout等等
function myAddEventListener(element, eventName, fn) {  //元素, 事件名称 ,事件处理函数
    if (element.addEventListener) {  //如果不支持,返回undefined  ,转换成boolean是false
        element.addEventListener(eventName, fn);
    } else if (element.attachEvent) { //判断是否支持attachEvent  IE6 - IE10
        element.attachEvent('on' + eventName, fn);
    } else {  //更古老的浏览器
        element['on' + eventName] = fn;  //相当于element.on(click) = fn;   click 只是其中之一
    }
}

//处理移除事件的兼容性问题
function myRemoveEventListener(element, eventName, fn) { //元素  事件名称/类型   要被移除的事件处理函数
    if (element.removeEventListener) {  //如果浏览器兼容removeEventListener 
        element.removeEventListener(eventName, fn);//省略了第三个参数param3(param1,param2,param3)
    } else if (element.detachEvent) {  //IE6 - IE10
        element.detachEvent('on' + eventName, fn);
    } else { //别的浏览器
        element['on' + eventName] = null;
    }
}
香格里拉&
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
JavaScript通过attachEvent和detachEvent方法处理带参数的函数
12-11
无标题文档 　　　 Click Me [Ctrl+A 全选 注:如需引入外部Js需刷新才能执行]
attachEvent(a)、detachEvent(b)和addEventListener(c)、removeEventListener(d)的区别和使用注意...
weixin_30337251的博客
08-17 54
1、使用d移除c时（只能通过d来移除），c的第二个参数不能是匿名函数 如：btn.addEventListener('click',function(){},false),是不能被移除的。 　　btn.addEventListener('click',handler,false)可以通过btn.removeEventListener('click',handler,false)移除，参数3如果...
js 添加_删除事件 addEventListener/removeEventListener和attachEvent/detachEvent
chao0803的专栏
02-21 1560
在IE和支持dom浏览器分别为：attachEvent（ie中的添加事件），detachEvent（ie中的删除事件），addEventListener（支持dom浏览器中的添加事件），removeEventListener（支持dom浏览器中的删除事件）。  document.getElementByIdx_x("clpbh").detachEvent("onblur",iscz); doc
JavaScript中attachEvent()和detachEvent()使用方法 — 第13.2.4节
flyingpig2016的博客
10-29 1万+
我们都知道，dom事件处理程序有两种类型：DOM0级和DOM2级，其中DOM0级在文档中调用onclick事件，这种方法比较繁琐，DOM2级使用addEventListener()和removeEventListener()两个方法处理事件，这种方法比较常见，但是，ie人家牛逼，IE中也有类似的两个方法：attachEvent()和detachEvent()。这两个方法接受相同的连个参数：事件处理程
detachEvent的用法
热门推荐
远
08-09 1万+
Tags: detachEvent方法可以在网页内删除一个已注册好的事件．比如你为某个按扭或某个元素添加了一个事件．但是有些时候你需要动态的删除这些事件．那么detachEvent提供了删除事件的这个功能．经过我测试detachEvent必须和attachEvent配对使用．也就是说必须使用attachEvent添加的事件，才可以被detachEvent方法删除． detachEvent并
attachEvent(detachEvent) 和 addEventListener(removeEventListener)
一个半路出家的人
09-12 874
 1,介绍添加多个两种方法 考虑到不同的人写同一个页面,有事后我们要为同一个元素添加多个事件,这些事件可能是相同的,因此我们有必要为一个元素同时添加多个元素 attachEvent  和 addEventListener 可以同时添加多个事件, attachEvent 谷歌,火狐Ie9版本以上大的浏览器都不支持     ie8以下的版本不支持 addEventListener 谷歌,火狐I...
JavaScript内存管理和内存泄漏
weixin_39805244的博客
05-21 861
像C语言这样的底层语言，一般是`由应用程序手动分配内存和释放内存的`。而JavaScript是`由引擎自动完成内存管理`的。虽然JavaScript会自动释放内存，但如果编码不当，也会造成`内存泄漏`问题。文章分析了JavaScript的`内存管理机制`，同时，总结了几种典型的内存泄漏的场景，最后，介绍了排查内存泄漏的相关实践。希望能够帮助我们在编码中尽量避免内存泄漏的问题，即使有问题了也可以快速定位。
20. 事件的使用方式
potato123232的博客
06-02 482
像点击鼠标，按下按键，只要是可侦测到的用户行为都叫事件事件有三部分组成，分别是事件源，事件类型，事件处理程序。这三部分也被称为事件三要素目录1 注册事件1.1 传统注册方式1.2 监听事件注册方式1.2.1 addEventListener()1.2.2 attachEvent()1.3 兼容性封装函数2 删除事件2.1 传统删除事件2.2 监听事件删除方式2.2.1 removeEventListener()2.2.2 detachEvent()3 DOM事件流4 事件对象4.1
js中addEventListener()与removeEventListener()用法案例分析
10-15
主要介绍了js中addEventListener()与removeEventListener()用法,结合实例形式分析了js中addEventListener()与removeEventListener()基本功能、用法与操作注意事项,需要的朋友可以参考下
addEventListener()与removeEventListener()解析
08-30
主要为大家详细介绍了addEventListener()与removeEventListener()，用于处理指定和删除事件处理程序操作，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
ie8-eventlisteners:IE8的Polyfill，用于addEventlistener和removeEventListener
05-07
＃IE-事件侦听器 这是IE8的基本填充程序，用于填充addEventListener和removeEventlistener函数
addEventListener()和removeEventListener()追加事件和删除追加事件
01-18
addEventListener()与removeEventListener()用于追加事件和删除追加。所有的DOM节点中都包含这两种方法，并且它们都接受3个参数：要处理的事件名、作为事件处理程序的函数和一个布尔值。 最后这个布尔值参数是true，...
Gantt - detachEvent分离自定义事件
Ariel_tilamisu的博客
12-23 282
Gantt - detachEvent分离自定义事件
JS之事件的基础知识
qq_46179838的博客
11-04 256
事件一、交互二、如何绑定事件1、ele.onXXX = function (event) {}2、ele.addEventListener (type,fn,false);——type是事件类型，fn是函数3、ele.attachEvent ('on' + type,fn);——type是事件类型，fn是处理函数三、事件处理程序的运行环境1、ele.onXXX = function (event) {} ——程序this指向是dom元素本身2、obj.addachEventListener(type,fn,
js中删除事件removeEventListener的使用
爬楼梯的前端小白的博客
01-27 9073
js中删除事件removeEventListener的使用
js的三大事件、事件移除、事件循环机制
yiyueqinghui的博客
06-10 4994
三大事件（鼠标事件、键盘事件、html事件） 1、鼠标事件 click：单击 dblclick：双击 mousemove：鼠标移动 mousedown：鼠标按下 mouseup：鼠标抬起 mouseover：鼠标悬浮 mouseout：鼠标离开 mouseenter：鼠标进入 mouseleave：鼠标离开 2、键盘事件 keydown：按键按下 keyup：按键抬起 keypress：按键按下抬起 3、HTML事件 load：文档加载完成 select：被选中的时候 change：内容被改变 f
移除 JavaScript 中事件监听器的几种方法
最新发布
VvpApplescript的博客
09-17 6599
在上面的代码中，我们首先定义了一个事件监听器 handleClick()，然后使用 addEventListener() 将它添加到 id 为 “myButton” 的按钮上。需要注意的是，如果我们直接在 removeEventListener() 中使用匿名函数，那么事件监听器将无法被正确移除。在上面的代码中，我们将事件监听器添加到父元素上，并在事件处理函数中检查事件目标是否是我们感兴趣的子元素。如果是，我们执行相应的操作。在这种情况下，移除事件监听器的方法稍有不同，我们需要在移除时使用相同的匿名函数。
[js] 删除绑定的事件 removeEventListener
qq_14993591的博客
09-08 7671
<div>我是div标签</div> var oDiv = document.querySelector('div'); // on语法绑定 oDiv.onclick = function(){console.log(1111)}; // 删除事件 赋值 空函数 oDiv.onclick = function(){}; // 事件监听语法 oDiv.addEvent
js添加元素方法
香格里拉&的博客
01-14 3925
1.insertBefore添加元素到指定位置 <ul id="ul"> <li>1</li> <li>2</li> <li>3</li> </ul> <ul id="sel"> </ul> <script> var btn = docume...
js中addeventlistener()与removeeventlistener()
09-04
在JavaScript中，addEventListener()和removeEventListener()是用于处理事件的两个方法。 addEventListener()方法用于向指定的元素添加事件监听器。它接受三个参数：事件类型、处理函数和一个可选的布尔值参数。...

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值