给dom元素绑定事件监听,刚入门的javascript编程人员都可以办到,比如obj.onclick = fn

obj.onclick = fn1;
obj.onclick = fn2;
...

可如果这么做,fn2会把fn1覆盖,也就是说在单击obj时只会执行fn2中的代码片段,fn1则会被忽略,很显然这样不能满足我们的需求。

在考虑到这个问题的时候,JS已经为我们准备了像attachEvnet、addEventListener这样的方法来满足我们的需求,利用对能力检测还是可以轻松的实现一个兼容的方法:

function bindEvent(elem,type,fn){if(elem.addEventListener){elem.addEventListener(type,fn,false);}else{elem.attachEvent("on"+type,fn);}
bindEvent(obj,"click",fn1);
bindEvent(obj,"click",fn2);

这样目的就达到了,当单击obj时,依次执行fn1、fn2。

解决了这个问题后,细心的淫们会发现在用attachEvent添加事件处理函数,执行的function中this执行是有问题的,始终指向window,又不是一个不小的麻烦。

那么有没有办法,来解决这个棘手的问题呢,答案是肯定的,这正是我写这篇文章的意义所在,废话!

其实只需对bindEvent稍作加工即可,如下:

function bindEvent(elem,type,fn){if(elem.addEventListener){elem.addEventListener(type,fn,false);}else{elem.attachEvent("on"+type,function(){fn.apply(elem,arguments);});}
}
bindEvent(obj,"mouseover",function(){alert(this)})

理论上,这样的解决方案近乎完美了,但是还有一个问题亟待解决,因为在attachEvent中使用了匿名函数来执行fn,导致在无法使用 detachEvent来删除绑定的某个代码片段,也许obj["on"+type] = null可以解决,清空绑定的代码片段,这很粗暴邪恶,同时也违背我们的业务需求。

我想要从根本上解决这些问题,就一定抛弃attachEvent这个方法,事实上我也是这样做的,如下:

(function(win,doc){var Event = {};Event.add = function(elem,type,fn){if(doc.addEventListener){elem.addEventListener(type,fn,false);}else{var typeRef = "_" + type;if(!elem[typeRef]){elem[typeRef] = [];}var len = elem[typeRef].length;while(len-->0){if(elem[typeRef][len] === fn)return;}elem[typeRef].push(fn);elem["on"+type] = function(){len = this[typeRef].length;this[typeRef].reverse();while(len-->0){this[typeRef][len].apply(this,arguments);}this[typeRef].reverse();}}};Event.remove = function(elem,type,fn){if(doc.addEventListener){elem.removeEventListener(type,fn,false);}else{var typeRef = "_" + type;if(elem[typeRef]){var len = elem[typeRef].length;while(len-->0){if(elem[typeRef][len] === fn){elem[typeRef].splice(len,1);break;};}}}};Event.getEve = function(e){return e || win.event;};Event.target = function(e){e = this.getEve(e);return e.target || e.srcElement;};Event.preventDefault = function(e){ //阻止默认事件e = this.getEve(e);e.preventDefault ? e.preventDefault() : e.returnValue = false;};Event.stopPropagation = function(e){ //阻止冒泡e = this.getEve(e);e.stopPropagation ? e.stopPropagation() : e.cancelBubble = true;};win.Event = Event;
})(window,document);

  

  

转载于:https://www.cnblogs.com/pangzai/p/4809424.html

添加、移除事件及相关处理函数各方法相关推荐

  1. 添加/移除事件处理程序

    添加/移除事件处理程序 本文整理自<JavaScript高级程序设计>(第3版). 1. HTML事件处理程序 添加事件: //在HTML标签中给特性指定函数: onclick=" ...

  2. [知识图谱实战篇] 五.HTML+D3添加鼠标响应事件显示相关节点及边

    前面作者讲解了很多知识图谱原理知识,包括知识图谱相关技术.Neo4j绘制关系图谱等,但仍缺少一个系统全面的实例.为了加深自己对知识图谱构建的认识,为后续创建贵州旅游知识图谱打下基础,作者深入学习了张宏 ...

  3. java的text函数,excel text函数以及相关的函数使用方法

    excel提供了大量的text函数用于操作文本字符串,例如Join Strings  |  Left  |  Right  |  Mid  |  Len  |  Find  |  Substitute ...

  4. js 添加和移除onclick事件(通过匿名函数实现)及jquery 移除事件

    2019独角兽企业重金招聘Python工程师标准>>> 代码如下: //移除事件  document.getElementById('mobile-a').οnclick=funct ...

  5. React AntV/G2Plot环形图Pie添加点击事件,即点击图环触发获取相关数据。

    步骤: 1.添加相关依赖,引入AntV/G2Plot图表组件 2.添加配置项 3.添加点击事件方法(关键部分:在onReady={onReadyPie},onReady是图表渲染完成执行回调方法,在该 ...

  6. js: 添加事件监听addEventListener、移除事件监听removeEventListener

    文档 https://developer.mozilla.org/zh-CN/docs/Web/API/EventTarget/addEventListener https://developer.m ...

  7. Android之BaseQuickAdapter(3.0.4版本)给子view添加点击事件(helper.addOnClickListener(view))的函数没了

    1.问题 用BaseQuickAdapter给子view添加点击事件,以前都是在适配器里面这么写的helper.addOnClickListener(view),现在这个函数没了 2.解决办法 直接在 ...

  8. js添加事件、移除事件、阻止冒泡、阻止浏览器默认行为等写法(兼容IE/FF/CHROME) 转载...

    js添加事件.移除事件.阻止冒泡.阻止浏览器默认行为等写法(兼容IE/FF/CHROME) 网上有关这方面的代码比较多而乱,这里整理一下并加以改进. 添加事件 01    var addEvent = ...

  9. 高德地图单点、多点标记,轨迹绘制,自定义标记覆盖物,给标记添加点击事件,移除所有标记和轨迹,轨迹回放功能

    文档地址 https://lbs.amap.com/api/javascript-api/guide/abc/prepare 注册 到官网注册一下就可以了https://lbs.amap.com/并创 ...

最新文章

  1. mariadb安装和使用
  2. 安装python程序后要进行什么设置-安装好Pycharm后如何配置Python解释器简易教程...
  3. java定义一个学生类cstudent_编写一个JAVA程序片断 定义一个表示学生的类student
  4. Bug调试(lldb)
  5. .ai域名注册已经极具投资价值进入火爆期
  6. 计算高斯混合模型的可分性和重叠度(Overlap Rate, OLR)
  7. 巧用Delegate在Silverlight多个页面、控件中传递回调方法
  8. pr剪辑教程,如何跨剪辑应用和调整效果?
  9. 台式计算机内存是什么问题,台式电脑提示内存不足怎么回事
  10. Matlab函数——wgn
  11. JavaScript进阶讲解六—>js函数式编程
  12. 塑料成型计算机模拟技术,塑料成型模拟软件技术基础与应用
  13. 计算机监理培训计划,监理人员培训计划
  14. 软件架构-nginx详解上
  15. 534 Policy requires SSL错误
  16. Python OpenCV去除图片水印
  17. 互斥量、临界区、信号量、事件标志组和消息邮箱
  18. DICOM标准中关于C-Find,运用StudyTime进行查找时无法查找到数据的问题
  19. DBeaver中的常用快捷键和自定义快捷键方式
  20. Qt:可视化UI设计

热门文章

  1. Git报错解决:OpenSSL SSL_read: Connection was reset, errno 10054 错误解决
  2. 工作流流程部署 一般功能代码
  3. java 向下转型运行时错误_java多态和向下转型问题。
  4. 先根序列创建二叉树c语言,用C语言创建二叉树并先序遍历.doc
  5. python表单防重复提交_传统方式提交表单,防止重复提交问题?
  6. 二流学校的计算机博士,“二流大学”的博士,值得读吗?想的尴尬症都犯了
  7. 登陆模板_曝北京国安克星将登陆中超,3年进84球,可成中超新政引援模板
  8. python列表数据写入txt文件_Python将列表数据写入文件(txt, csv,excel)
  9. window.open ()的用法
  10. win10 安装 cognos 10.2.0