最佳的addEvent事件绑定是怎样诞生的


Posted in Javascript onOctober 24, 2011

当我们编写脚本的时候创建了交叉引用,例如如下代码:

window.onload = function() {
  var x = document.getElementsByTagName('H3');
  for (var i = 0; i < x.length; i++) {
    x[i].onclick = openClose;
    x[i].relatedElement = x[i].nextSibling; // simplified situation 
    x[i].relatedElement.relatedElement = x[i];
  }
}

或者在函数中使用脚本语言最常见的闭句Closures的时候,IE都无法回收内存。而闭句在给DOM对象注册事件处理器(event handler)的时候最为常用。Novemberborn提供了一些example可以让你运行并切实感受到这个bug。
我最喜爱的QuirkMode 去年初意识到这个bug存在巨大隐患,觉得有必要呼吁广大web开发者关注并竭力避免这个问题,于是举办了一个慈善邀请赛,鼓励大家提交各自 addEvent/removeEvent 方案。并终于在去年10月下旬宣布了他们认为的胜利者:John Resig,让John赢得胜利的代码如下:

function addEvent(obj, type, fn) {
  if (obj.attachEvent) {
    obj['e' + type + fn] = fn;
    obj[type + fn] = function() {
      obj['e' + type + fn](window.event);
    }
    obj.attachEvent('on' + type, obj[type + fn]);
  } else obj.addEventListener(type, fn, false);
}
function removeEvent(obj, type, fn) {
  if (obj.detachEvent) {
    obj.detachEvent('on' + type, obj[type + fn]);
    obj[type + fn] = null;
  } else obj.removeEventListener(type, fn, false);
}

QuirkMode 对选择John为胜利者的解释概括来说就是以上代码最简洁有效,在避免内存问题的同时还巧妙的保证了this关键字在ie的attachEvent中能正常工作。缺点当然还是存在:

不支持 Netscape 4 和 Explorer 5 Mac。(有可能国内的程序员会嗤之以鼻,但国外很强调广泛的兼容性)
在 removeEvent 中遗漏了remove obj["e"+type+fn]。
总之不管怎么说,简单取胜。
结果一出,众多参赛与评论者不服气,很快又挑出了John的代码的几处毛病:

addEvent中本身就使用了闭句,所以没有根本解决IE内存泄露的问题。
没有解决同类型的事件可能被重复注册而被IE重复执行的问题。
几个高手于是提出了改进性的方案:

/* 
Original idea by John Resig 
Tweaked by Scott Andrew LePera, Dean Edwards and Peter-Paul Koch 
Fixed for IE by Tino Zijdel (crisp) 
Note that in IE this will cause memory leaks and still doesn't quite function the same as in browsers that do support the W3C event model: 
- event execution order is not the same (LIFO in IE against FIFO) 
- functions attached to the same event on the same element multiple times will also get executed multiple times in IE 
*/
function addEvent(obj, type, fn) {
  if (obj.addEventListener) obj.addEventListener(type, fn, false);
  else if (obj.attachEvent) {
    obj["e" + type + fn] = fn;
    obj.attachEvent("on" + type,
    function() {
      obj["e" + type + fn]();
    });
  }
}
function removeEvent(obj, type, fn) {
  if (obj.removeEventListener) obj.removeEventListener(type, fn, false);
  else if (obj.detachEvent) {
    obj.detachEvent("on" + type, obj["e" + type + fn]);
    obj["e" + type + fn] = null;
  }
}

很明显,虽然修正了John代码的一些不足。但内存泄露依然存在,部分浏览器依然不支持,还是无法避免ie重复注册。另外根据注释:当在同一个对象上注册多个事件处理器的时候,IE与其他浏览器的执行顺序是不同的,这又是一个隐患。

几天之后,一个被认为最严谨的方案由Dean Edwards 提出。Dean他的方案与众不同:

不执行对象检测(Object detection)
没有调用 addeventListener/attachEvent 方法
保持this关键字的运行于正确的上下文环境
正确传递 event 对象参数
完全跨浏览器至此(包括IE4和NS4)
不存在内存泄露

Dean的代码如下:

// written by Dean Edwards, 2005 
// http://dean.edwards.name/function ;addEvent(element, type, handler) { 
// assign each event handler a unique ID 
// 为事件处理函数设定一个唯一值 
if (!handler.$$guid) handler.$$guid = addEvent.guid++;
// create a hash table of event types for the element 
if (!element.events) element.events = {};
// create a hash table of event handlers for each element/event pair 
var handlers = element.events[type];
if (!handlers) {
  handlers = element.events[type] = {};
  // store the existing event handler (if there is one) 
  // 如果对象已经注册有事件处理,那么要保留下来,并保存为第一个 
  if (element["on" + type]) {
    handlers[0] = element["on" + type];
  }
}
// store the event handler in the hash table 
handlers[handler.$$guid] = handler;
// assign a global event handler to do all the work 
// 指派一个全局函数做统一的事件处理,同时避免了反复注册 
element["on" + type] = handleEvent;
};
// a counter used to create unique IDs 
addEvent.guid = 1;
function removeEvent(element, type, handler) {
  // delete the event handler from the hash table 
  if (element.events && element.events[type]) {
    delete element.events[type][handler.$$guid];
  }
};
function handleEvent(event) {
  // grab the event object (IE uses a global event object) 
  event = event || window.event;
  // get a reference to the hash table of event handlers 
  // 这里的 this 随 handlerEvent function 被触发的source element 变化而变化 
  var handlers = this.events[event.type];
  // execute each event handler 
  for (var i in handlers) {
    //这样写才能保证注册的事件处理函数中的 this 得到正确的引用,直接handlers[i]()是不行的 
    this.$$handleEvent = handlers[i];
    this.$$handleEvent(event);
  }
};

这段代码相比之前就大了不少了,不过确实很精妙。可是这段代码却引入了其他的问题,比如无法处理事件处理函数的返回值,for..in循环可能因为 (Object.prototype)的错误应用而中断等等...很快Dean推出一个"updated version"。

要做到最好真的好辛苦。

目前似乎Dean的最终版本是最全面的解决方案。不过就我个人意见,感觉有些吹毛求疵了。尽量使用浏览器本身的实现和保持简单是我一贯坚持的主张。但洋人这种严谨的态度,还是让我深深敬佩。

Javascript 相关文章推荐
JavaScript 字符编码规则
May 04 Javascript
JavaScript中常见陷阱小结
Apr 27 Javascript
ajax 同步请求和异步请求的差异分析
Jul 04 Javascript
js带闹铃功能的倒计时代码
Sep 29 Javascript
详解JavaScript对象的深浅复制
Mar 30 Javascript
用node和express连接mysql实现登录注册的实现代码
Jul 05 Javascript
基于Particles.js制作超炫粒子动态背景效果(仿知乎)
Sep 13 Javascript
解决vue打包之后静态资源图片失效的问题
Feb 21 Javascript
Vue+webpack+Element 兼容问题总结(小结)
Aug 16 Javascript
vue利用v-for嵌套输出多层对象,分别输出到个表的方法
Sep 07 Javascript
微信小程序日历插件代码实例
Dec 04 Javascript
vue iview实现动态新增和删除
Jun 17 Javascript
关于javascript function对象那些迷惑分析
Oct 24 #Javascript
文本框根据输入内容自适应高度的代码
Oct 24 #Javascript
js创建数据共享接口——简化框架之间相互传值
Oct 23 #Javascript
javascript模版引擎-tmpl的bug修复与性能优化分析
Oct 23 #Javascript
js面向对象设计用{}好还是function(){}好(构造函数)
Oct 23 #Javascript
jQuery EasyUI API 中文文档 - TimeSpinner时间微调器
Oct 23 #Javascript
利用jQuery插件扩展识别浏览器内核与外壳的类型和版本的实现代码
Oct 22 #Javascript
You might like
一些被忽视的PHP函数(简单整理)
2010/04/30 PHP
php用正则表达式匹配URL的简单方法
2013/11/12 PHP
PHP获取一个字符串中间一部分字符的方法
2014/08/19 PHP
thinkPHP5 tablib标签库自定义方法详解
2017/05/10 PHP
用Javascript评估用户输入密码的强度(Knockout版)
2011/11/30 Javascript
javascript ie6兼容position:fixed实现思路
2013/04/01 Javascript
基于IE下ul li 互相嵌套时的bug,排查,解决过程以及心得介绍
2013/05/07 Javascript
jQuery中toggleClass()方法用法实例
2015/01/05 Javascript
JS判断是否长按某一键的方法
2016/03/02 Javascript
简单实现Vue的observer和watcher
2016/12/21 Javascript
canvas学习之API整理笔记(一)
2016/12/29 Javascript
JS中解决谷歌浏览器记住密码输入框颜色改变功能
2017/02/13 Javascript
js模块加载方式浅析
2017/08/12 Javascript
微信小程序选择图片和放大预览图片功能
2017/11/02 Javascript
基于vue 实现token验证的实例代码
2017/12/14 Javascript
在 Angular中 使用 Lodash 的方法
2018/02/11 Javascript
vue-cli项目优化方法- 缩短首屏加载时间
2018/04/01 Javascript
利用js将ajax获取到的后台数据动态加载至网页中的方法
2018/08/08 Javascript
[03:10]2014DOTA2 TI马来劲旅Titan首战告捷目标只是8强
2014/07/10 DOTA
[03:37]2015国际邀请赛第四日现场精彩集锦
2015/08/08 DOTA
python通过索引遍历列表的方法
2015/05/04 Python
利用Python的Django框架生成PDF文件的教程
2015/07/22 Python
Python 的内置字符串方法小结
2016/03/15 Python
Python实现压缩和解压缩ZIP文件的方法分析
2017/09/28 Python
Python自动化运维_文件内容差异对比分析
2017/12/13 Python
使用numba对Python运算加速的方法
2018/10/15 Python
关于numpy数组轴的使用详解
2019/12/05 Python
Pytorch 实现权重初始化
2019/12/31 Python
使用Python来做一个屏幕录制工具的操作代码
2020/01/18 Python
html5 canvas手势解锁源码分享
2020/01/07 HTML / CSS
Vans英国官方网站:美国南加州的原创极限运动潮牌
2017/01/20 全球购物
财务出纳员岗位职责
2013/11/26 职场文书
2016年暑期教师培训心得体会
2016/01/09 职场文书
CSS作用域(样式分割)的使用汇总
2021/11/07 HTML / CSS
vue-cli3.0修改打包后的文件名和文件地址,打包后本地运行报错解决
2022/04/06 Vue.js
CSS 实现角标效果的完整代码
2022/06/28 HTML / CSS