JavaScript中绑定事件监听函数的通用方法[ addEvent() ]
上篇文章讲到了事件绑定的3中常用方法:传统绑定、W3C绑定方法、IE绑定方法。但是,在实际开发中对于我们来讲重要的是需要一个通用的、跨浏览器的绑定方法。如果我们在互联网上搜索一下会发现许多方法,一下是比较知名的几种方法:
在开始学期下面几种方法之前,应当讨论一下,一个好的addEvent()方法应当达到哪些要求:
a、支持同一元素的同一事件句柄可以绑定多个监听函数;
b、如果在同一元素的同一事件句柄上多次注册同一函数,那么第一次注册后的所有注册都被忽略;
c、函数体内的this指向的应当是正在处理事件的节点(如当前正在运行事件句柄的节点);
d、监听函数的执行顺序应当是按照绑定的顺序执行;
e、在函数体内不用使用 event = event || window.event; 来标准化Event对象;
一、John Resig 所写的 addEvent() 函数:http://ejohn.org/projects/flexible-javascript-events/
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() 函数 :http://dean.edwards.name/weblog/2005/10/add-event2/
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点要求。如果大家有更好的方法,期待分享!
转载于:https://www.cnblogs.com/rainman/archive/2009/02/11/1387955.html
JavaScript中绑定事件监听函数的通用方法[ addEvent() ]相关推荐
- JavaScript 基础--- (正则表达式 / 事件监听与绑定)
正则表达式 创建正则表达式: 方法一: var reg = /pattern/; 方法二:var reg = new RegExp('pattern'); RegExp 对象的常用方法: 示例: &l ...
- vue+百度地图——事件监听函数的绑定和解绑
事件监听函数如果绑定之后不进行解绑的话,再触发其他事件的时候这个绑定时间依旧会被触发.比如: <el-button type="primary" @click="t ...
- html怎么给没张图片添加单击事件,如何在Canvas上的图形/图像绑定事件监听的实现...
HTML中只能为元素/标签绑定监听函数: Canvas绘图中只有一个元素-canvas,每一个图形/图像都不是元素,不能直接进行事件绑定. 解决办法:"事件委托"--让canvas ...
- JavaScript 的addEventListener() 事件监听详解!
JavaScript 的addEventListener() 事件监听详解! addEventListener() 用于向指定元素添加事件. 可以向一个元素添加多次事件或者多次不同事件,后面的事件是 ...
- 【方案篇】事件监听函数的内存泄漏,帮你搞定!不谢!!!
本文是 理论篇 ,还有下篇 代码篇. 前言 工作中,我们会对window, DOM节点,WebSoket, 或者单纯的事件中心等注册事件监听函数. // window window.addEventL ...
- jQuery绑定事件监听bind和移除事件监听unbind用法实例详解
这里分别采用后bind(eventType,[data],Listener)//data为可选参数,one()该方法绑定的事件触发一次后自动删除,unbind(eventType,Listener), ...
- JavaScript原生实现事件监听及手动触发
事件监听 标签中的onxxx,比如<button οnclick="btnHandler">按钮</button> js中的onxxx,比如document ...
- java中事件监听_Java中的事件监听机制
鼠标事件监听机制的三个方面: 1.事件源对象: 事件源对象就是能够产生动作的对象.在Java语言中所有的容器组件和元素组件都是事件监听中的事件源对象.Java中根据事件的动作来区分不同的事件源对象,动 ...
- Activiti中的事件监听
工作流程事件监听可用于任务提醒.超时提醒等的模块的设计. 其默认的事件监听接口:org.activiti.engine.delegate.event.ActivitiEventListener 事件类 ...
最新文章
- [并查集][排序] Jzoj P4223 旅游
- 【CodeVS1080】线段树练习
- Chrome如何离线安装crx文件
- 一文了解Nuget的使用
- c语言商品货架管理_汽配仓库布局及管理
- Oracle中表连接的方式有哪些
- POJ 2348 Euclid's Game(博弈)题解
- windows用户态程序的Dump
- python自动化测试-Python自动化测试如何自动生成测试用例?
- 直接部署nginx和在docker里面部署nginx性能上有区别吗
- Flutter动画系列之SizeTransition
- 2-Python程序实例解析
- winrar是不是计算机应用软件,请注意winrar不是一个免费软件。在40天的试用期结束后,你必须购买一个许可,或者将他从你的计算机中删除...
- 探究网络信息安全问题及防范措施
- 美国未来计算机人才需求,对话美国帕森斯前院长:“未来人才需求趋势”
- “天天向上“py代码
- 有哪些比较好用的黄页网站?
- 163/qq邮箱设置POP3/IMAP/SMTP/Exchange/CardDAV/CalDAV服务
- boost asio 学习
- wamp3.2.6以上版本控制面板时间不正确的解决方法