JavaScript绑定事件监听函数的通用方法
更新时间：2016年05月14日 18:41:21 作者：Rain Man
这篇文章主要为大家详细介绍了JavaScript绑定事件监听函数的通用方法，感兴趣的朋友可以参考一下
事件绑定的3中常用方法：传统绑定、W3C绑定方法、IE绑定方法。但是，在实际开发中对于我们来讲重要的是需要一个通用的、跨浏览器的绑定方法。如果我们在互联网上搜索一下会发现许多方法，以下是比较知名的几种方法：
在开始学期下面几种方法之前，应当讨论一下，一个好的addEvent()方法应当达到哪些要求：
a、支持同一元素的同一事件句柄可以绑定多个监听函数；
b、如果在同一元素的同一事件句柄上多次注册同一函数，那么第一次注册后的所有注册都被忽略；
c、函数体内的this指向的应当是正在处理事件的节点（如当前正在运行事件句柄的节点）；
d、监听函数的执行顺序应当是按照绑定的顺序执行；
e、在函数体内不用使用 event = event || window.event; 来标准化Event对象；
一、John Resig 所写的 addEvent() 函数
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 );
}
这个函数如此简单易懂，的确非常令人惊讶。那么我们还是要看看上面的五点要求：
对于第一点满足了；
对于第三点和第五点，肯定也满足了；
对于第二点，并没有满足，因为addEventListener()会忽略重复注册，而attachEvent()则不会忽略；
但是第四点，并没有满足，因为Dom标准没有确定调用一个对象的时间处理函数的顺序，所以不应该想当然的认为它们以注册的顺序调用。
但是这个函数仍然是一个非常优秀的函数。
二、Dean Edward 所写的 addEvent() 函数
function addEvent(element, type, handler) {
if (!handler.$$guid) handler.$$guid = addEvent.guid++;
if (!element.events) element.events = {};
var handlers = element.events[type];
if (!handlers) {
handlers = element.events[type] = {};
if (element["on" + type]) {
handlers[0] = element["on" + type];
}
}
handlers[handler.$$guid] = handler;
element["on" + type] = handleEvent;
}
addEvent.guid = 1;
function removeEvent(element, type, handler) {
if (element.events && element.events[type]) {
delete element.events[type][handler.$$guid];
}
}
function handleEvent(event) {
var returnValue = true;
event = event || fixEvent(window.event);
var handlers = this.events[event.type];
for (var i in handlers) {
this.$$handleEvent = handlers[i];
if (this.$$handleEvent(event) === false) {
returnValue = false;
}
}
return returnValue;
};
function fixEvent(event) {
event.preventDefault = fixEvent.preventDefault;
event.stopPropagation = fixEvent.stopPropagation;
return event;
};
fixEvent.preventDefault = function() {
this.returnValue = false;
};
fixEvent.stopPropagation = function() {
this.cancelBubble = true;
};
该函数使用了传统的绑定方法，所以它可以在所有的浏览器中工作，也不会造成内存泄露。
但是对于最初提出的5点，该函数只是满足了前四点。只有最后一点没有满足，因为在JavaScript中对for/in语句的执行顺序没有规定是按照赋值的顺序执行，尽管大部分时刻是按照预期的顺序执行，因此在不同的JavaScript版本或实现中这一语句的顺序有可能不同。
三、Dean Edward 的 addEvent() 函数的改进
Array.prototype.indexOf = function( obj ){
var result = -1 , length = this.length , i=length - 1;
for ( ; i>=0 ; i-- ) {
if ( this[i] == obj ) {
result = i;
break;
}
}
return result;
}
Array.prototype.contains = function( obj ) {
return ( this.indexOf( obj ) >=0 )
}
Array.prototype.append = function( obj , nodup ) {
if ( !(nodup && this.contains( obj )) ) {
this[this.length] = obj;
}
}
Array.prototype.remove = function( obj ) {
var index = this.indexOf( obj );
if ( !index ) return ;
return this.splice( index , 1);
};
function addEvent(element , type , fun){
if (!element.events) element.events = {};
var handlers = element.events[type];
if (!handlers) {
handlers = element.events[type] = [];
if(element['on' + type]) {
handlers[0] = element['on' + type];
}
}
handlers.append( fun , true)
element['on' + type] = handleEvent;
}
function removeEvent(element , type , fun) {
if (element.events && element.events[type]) {
element.events[type].remove(fun);
}
}
function handleEvent(event) {
var returnValue = true , i=0;
event = event || fixEvent(window.event);
var handlers = this.events[event.type] , length = handlers.length;
for ( ; i < length ; i++) {
if ( handlers[i].call( this , event) === false ){
returnValue = false;
}
}
return returnValue;
}
function fixEvent(event) {
event.preventDefault = fixEvent.preventDefault;
event.stopPropagation = fixEvent.stopPropagation;
return event;
}
fixEvent.preventDefault = function() {
this.returnValue = false;
};
fixEvent.stopPropagation = function() {
this.cancelBubble = true;
};
该函数是本人对Dean Edward 的 addEvent() 函数的改进，完全满足了最初提出的5点要求，希望对大家的学习有所帮助，谢谢大家的阅读。
相关文章
js利用appendChild对<li>标签进行排序的实现方法
下面小编就为大家带来一篇js利用appendChild对<li>标签进行排序的实现方法。小编觉得挺不错的，现在就分享给大家，也给大家做个参考。一起跟随小编过来看看吧2016-10-10
本文主要分享了Canvas 绘制粒子动画背景的示例代码。具有很好的参考价值，下面跟着小编一起来看下吧2017-02-02
这篇文章主要给大家介绍了关于JS异步的执行原理和回调的相关资料，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧2021-03-03
JavaScript中break、continue和return的用法区别实例分析
这篇文章主要介绍了JavaScript中break、continue和return的用法区别,结合实例形式详细对比分析了JavaScript中break、continue和return的基本功能、使用方法、区别与操作注意事项,需要的朋友可以参考下2020-03-03
本篇文章主要介绍基于javascript实现按圆形排列DIV元素的方法，此文着重于介绍对实现的按圆形排列DIV元素的分析，需要的朋友来看下吧2016-12-12
IE没有我们想象中笨，它知道总的循环次数还是一千万次。因此，得把这一百个十万次循环分开执行。虽然Javascript是单线程的，但也可以通过setTimeout或setInterval模拟多线程。2011-03-03
今天网站有个小功能要判断用户购买商品数量是否大于库存数据，如果大于库存数量，就给予提示。2010-12-12
运行代码之后随意移动鼠标的位置，可适时显现鼠标的坐标点，不占用系统资源2014-03-03
在web页面中，图片居左，内容居右排列，是非常常见的效果，它也就是媒体对象，它是一种抽象的样式，可以用来构建不同类型的组件。本文给大家介绍Bootstrap媒体对象的实现，感兴趣的朋友一起学习吧2016-05-05
这篇文章主要介绍了JavaScript生成验证码并实现验证功能的相关资料,代码简单易懂，非常不错，具有参考借鉴价值，需要的朋友可以参考下2016-09-09
最新评论