JavaScript移除绑定在元素上的匿名事件处理函数

news/2024/7/5 5:30:10

前言:

面试的时候有点蒙,结束之后想想自己好像根本就误解了面试官的问题,因为我理解的这个问题本身就没有意义。但是当时已经有一些思路,但是在一个点上被卡住。

结束之后脑子瞬间灵光,想出了当时没有迈出的那一小步。所以不想计较这个问题本身的意义,单纯的想要把这个我理解错了的问题解决,就当是满足自己一个小小的愿望吧。

 

问题:

用addEventListener()和attachEvent()给一个DOM元素绑定事件处理程序时,如果传入一个匿名函数,那么用相应的removeEventListener()和detachEvent()是无法将这个匿名的处理程序解除绑定的。所以我们用的时候应该传入一个函数表达式。

那么,如果我就是想使用匿名函数进行绑定和解绑,怎么解决?

 

思路:

既然这两个函数都高冷的说明了不接受相同的匿名函数进行解绑,那么就只能另寻出路,不能靠它来管理事件了。

所以需要一个自定义的对象来管理事件。

事件处理程序的本质就是,当一个事件在一个对象上发生时,执行监听这个事件的函数。

翻译一下:

一个DOM元素可能被绑定多个事件类型的处理程序。比如click的时候颜色改变,mouseover的时候变大。

一个事件类型可能绑定多个事件处理程序。比如mouseover的时候又变色又变大。

所以,这个事件对象应该有一个属性用来存储这个DOM元素上绑定的所有事件处理程序,还应该有两个方法,一个用来添加,一个用来删除。

复制代码
{
handlers:{
type1:[handler1,handler2],
type2:[handler1,handler2],
...//其他事件类型和对应的事件处理函数
},
on:function(){},
off:function(){}
}
复制代码

当一个事件发生时,就调用这个对象里面对应的事件类型的数组里面的所有函数。

所以绑定事件就是往对应的数组里面添加函数,解除绑定事件就是把这个函数从这个数组里面删掉。

那么怎么保证操作的是那个正确的DOM元素呢?

显然,每个DOM元素都应该需要一个这样的对象,用于管理自己的事件处理程序。

每个对象都有的东西,那不就是他的属性嘛。(而我当时就被卡在了这里)。

实现:

每个DOM元素都需要这样一个对象,而且每个对象中的on()和off()方法都是相同的,所以需要一个构造函数,把这两个方法放到他的原型对象中去。

复制代码
function EventManage(){this.handlers={}
}
EventManage.prototype={on:function(type,handler){if(!this.handlers[type]){this.handlers[type]=[handler];return true;  //避免添加多个事件}else{this.handlers[type].push(handler);}},off:function(type,handler){for(var i=0,len=this.handlers[type].length;i<len;i++){if(this.handlers[type][i].toString()==handler.toString()){this.handlers[type].splice(i,1);}}}
}
复制代码

每个对象有了这两个方法,就可以自行添加和移除事件处理程序了,但是,监听事件,还是要靠JavaScript提供的方法,所以借用addEventListner()和attachEvent()来监听事件:

复制代码
var EventUtil={};
EventUtil.on=function(ele,type,handler){if (!ele.event) {ele.event=new EventManage();}var isNewType=ele.event.on(type,handler);var fire=function(){for(var i=0,len=ele.event.handlers[type].length;i<len;i++){ele.event.handlers[type][i]();}};if (isNewType) {if (ele.addEventListener) {ele.addEventListener(type,fire,false);}else{ele.attachEvent("on"+type,fire);}}
}
EventUtil.off=function(ele,type,handler){ele.event.off(type,handler);
}
复制代码

这里要注意一个问题,每次使用EventUtil.on()时都会重新定义一个fire函数,addEventListener()就会给相同的事件类型添加多个相同的事件处理程序,所以需要判断一下这个事件类型是不是新增的,如果是的话再用addEventListener()来监听这个事件类型。

 

使用示例:

复制代码
var btn=document.getElementById("btn");EventUtil.on(btn,"click",function(){console.log("11");
});
EventUtil.on(btn,"click",function(){console.log("22");
});
EventUtil.off(btn,"click",function(){console.log("11");
});
复制代码

当点击btn时,只打印了"22",说明匿名函数成功解绑。


http://lihuaxi.xjx100.cn/news/283571.html

相关文章

jpa删除数据后数据库无修改_java – JPA不删除数据库行

我正面临着JPA的删除问题,这是我的代码&#xff1a;public deleteLine(int idLine) {Line line em.find(Line.class,idLine);Header header line.getHeader();this.deleteLine(header,line);}public boolean deleteLine(Header header, Line line) {try {line.setIdArticle(n…

漫画:什么是LRU算法?

本期封面作者&#xff1a;A17————— 两个月前 —————用户信息当然是存在数据库里。但是由于我们对用户系统的性能要求比较高&#xff0c;显然不能每一次请求都去查询数据库。所以&#xff0c;小灰在内存中创建了一个哈希表作为缓存&#xff0c;每次查找一个用户的时候…

Windows Live Messenger  正式版已经发布

Windows Live Messenger 正式版已经发布!这是新一代的 Messenger。它拥有全新的名字&#xff0c;可以免费下载。并且除了延续使用原 Messenger 的全部功能外&#xff0c;它还提供了几种出色的全新交流方式&#xff0c;实现与朋友的即时共享和交流。转载于:https://www.cnblogs.…

使用 Vagrant 在不同的操作系统上测试你的脚本

Vagrant 可以帮助你在你的电脑上运行其他操作系统&#xff0c;这意味着你可以构建、测试、疯狂折腾而不毁坏你的系统。 我使用 Vagrant 已经很长时间了。我使用几种 DevOps 工具&#xff0c;把它们全安装在一个系统上会搞得很乱。Vagrant 可以让你在不破坏系统的情况下随意折腾…

Contiki 2.7 Makefile 文件(一)

一、主控Makefile 这里以hello-world例子为主线&#xff0c;从其工程Makefile开始&#xff0c;解析整个build过程。 (1)CONTIKI_PROJECT hello-world 定义变量CONTIKI_PROJECT为 hello-world (2)all: $(CONTIKI_PROJECT) all是第一个目标&#xff0c;也就是默认目标&#xf…

mqtt 传文件断开连接的原因_mqtt 发送消息断开链接

出现如下错误o.s.i.mqtt.outbound.MqttPahoMessageHandler|Lost connection; will attempt reconnect on next request我的配置Beanpublic MqttPahoClientFactory mqttClientFactory1() {DefaultMqttPahoClientFactory factory new DefaultMqttPahoClientFactory();MqttConnec…

C++开源跨平台类库集

在如下的库支持下&#xff0c;开发的系统可以很方便移植到当前大部分平台上运行而无需改动&#xff0c;只需在对应的平台下 用你喜欢的编译器 重新编译即可 经典的C库 STLport-------SGI STL库的跨平台可移植版本&#xff0c;在以前有些编译器离符合 标准比较远的情况…

链式比较、奇怪的字母、有趣的import...Python冷知识(六)

本文转载自Python编程时光&#xff08;ID:Python-Time&#xff09;冷知识系列&#xff0c;已经更新至第六篇。谈谈 Python 那些不为人知的冷知识&#xff08;一&#xff09;谈谈 Python 那些不为人知的冷知识&#xff08;二&#xff09;谈谈 Python 那些不为人知的冷知识&#…