javascript 处理事件绑定的一些兼容写法


Posted in Javascript onDecember 24, 2009

绑定事件

var addEvent = function( 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](); 
} ); 
} 
};

另一个实现
var addEvent = (function () { 
if (document.addEventListener) { 
return function (el, type, fn) { 
el.addEventListener(type, fn, false); 
}; 
} else { 
return function (el, type, fn) { 
el.attachEvent('on' + type, function () { 
return fn.call(el, window.event); 
}); 
} 
} 
})();

绑定onpropertychange事件

onpropertychange是微软制造的一个事件,它在一个元素的属性发生变化的时候触发,常见的有文本的长度改变,样长改变等,FF大致和它相似的属性为oninput事件,不过它只针对textfield与textarea的value属性。safari,firefox,chrome与 opera都支持此属性。

var addPropertyChangeEvent = function (obj,fn) { 
if(window.ActiveXObject){ 
obj.onpropertychange = fn; 
}else{ 
obj.addEventListener("input",fn,false); 
} 
}

移除事件
var removeEvent = function( 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; 
} 
};

加载事件
var loadEvent = function(fn) { 
var oldonload = window.onload; 
if (typeof window.onload != 'function') { 
window.onload = fn; 
}else { 
window.onload = function() { 
oldonload(); 
fn(); 
} 
} 
}

阻止事件
var stopEvent = function(e){ 
e = e || window.event; 
if(e.preventDefault) { 
e.preventDefault(); 
e.stopPropagation(); 
}else{ 
e.returnValue = false; 
e.cancelBubble = true; 
} 
}

如果仅仅是阻止事件冒泡
var stopPropagation = function(e) { 
e = e || window.event; 
if (!+"\v1") { 
e.cancelBubble = true; 
} else { 
e.stopPropagation(); 
} 
}

取得事件源对象

相当于Prototype.js框架的Event.element(e)

var getEvent = function(e){ 
e = e || window.event; 
var target = event.srcElement ? event.srcElement : event.target; 
return target 
}

或者这个功能更强大,我在开发datagrid时开发出来的,详细用法见《一步步教你实现表格排序(第二部分)》。
var getEvent = function(e) { 
var e = e || window.event; 
if (!e) { 
var c = this.getEvent.caller; 
while (c) { 
e = c.arguments[0]; 
if (e && (Event == e.constructor || MouseEvent == e.constructor)) { 
break; 
} 
c = c.caller; 
} 
} 
var target = e.srcElement ? e.srcElement : e.target, 
currentN = target.nodeName.toLowerCase(), 
parentN = target.parentNode.nodeName.toLowerCase(), 
grandN = target.parentNode.parentNode.nodeName.toLowerCase(); 
return [e,target,currentN,parentN,grandN]; 
}

最后附上DOM3.0事件的一览表
type Bubbling phase Cancelable Target node types DOM interface
DOMActivate Yes Yes Element UIEvent
DOMFocusIn Yes No Element UIEvent
DOMFocusOut Yes No Element UIEvent
focus No No Element UIEvent
blur No No Element UIEvent
textInput Yes Yes Element TextEvent
click Yes Yes Element MouseEvent
dblclick Yes Yes Element MouseEvent
mousedown Yes Yes Element MouseEvent
mouseup Yes Yes Element MouseEvent
mouseover Yes Yes Element MouseEvent
mousemove Yes Yes Element MouseEvent
mouseout Yes Yes Element MouseEvent
keydown Yes Yes Element KeyboardEvent
keyup Yes Yes Element KeyboardEvent
mousemultiwheel Yes Yes Document, Element MouseMultiWheelEvent
mousewheel Yes Yes Document, Element MouseWheelEvent
DOMSubtreeModified Yes No Document, DocumentFragment, Element, Attr MutationEvent
DOMNodeInserted Yes No Element, Attr, Text, Comment, CDATASection, DocumentType, EntityReference, ProcessingInstruction MutationEvent
DOMNodeRemoved Yes No Element, Attr, Text, Comment, CDATASection, DocumentType, EntityReference, ProcessingInstruction MutationEvent
DOMNodeRemovedFromDocument No No Element, Attr, Text, Comment, CDATASection, DocumentType, EntityReference, ProcessingInstruction MutationEvent
DOMNodeInsertedIntoDocument No No Element, Attr, Text, Comment, CDATASection, DocumentType, EntityReference, ProcessingInstruction MutationEvent
DOMAttrModified Yes No Element MutationEvent
DOMCharacterDataModified Yes No Text, Comment, CDATASection, ProcessingInstruction MutationEvent
DOMElementNameChanged Yes No Element MutationNameEvent
DOMAttributeNameChanged Yes No Element MutationNameEvent
load No No Document, Element Event
unload No No Document, Element Event
abort Yes No Element Event
error Yes No Element Event
select Yes No Element Event
change Yes No Element Event
submit Yes Yes Element Event
reset Yes Yes Element Event
resize Yes No Document, Element UIEvent
scroll Yes No Document, Element UIEvent
作者:Ruby's Louvre
Javascript 相关文章推荐
初窥JQuery(二) 事件机制(1)
Nov 25 Javascript
利用jQuery简单实现产品展示图片左右滚动功能(示例代码)
Jan 02 Javascript
jquery教程ajax请求json数据示例
Jan 13 Javascript
js鼠标点击图片切换效果代码分享
Aug 26 Javascript
JavaScript和HTML DOM的区别与联系及Javascript和DOM的关系
Nov 15 Javascript
JS函数arguments数组获得实际传参数个数的实现方法
May 28 Javascript
简单实现js无缝滚动效果
Feb 05 Javascript
JS正则替换去空格的方法
Mar 24 Javascript
vue.js 中使用(...)运算符报错的解决方法
Aug 09 Javascript
vue自定义指令的创建和使用方法实例分析
Dec 04 Javascript
element form 校验数组每一项实例代码
Oct 10 Javascript
ES11新增的这9个新特性,你都掌握了吗
Oct 15 Javascript
Javascript 键盘keyCode键码值表
Dec 24 #Javascript
JQuery与iframe交互实现代码
Dec 24 #Javascript
jquery 弹出登录窗口实现代码
Dec 24 #Javascript
Jquery 高亮显示文本中重要的关键字
Dec 24 #Javascript
JQuery 写的个性导航菜单
Dec 24 #Javascript
JavaScript中出现乱码的处理心得
Dec 24 #Javascript
js 页面刷新location.reload和location.replace的区别小结
Dec 24 #Javascript
You might like
全国FM电台频率大全 - 13 福建省
2020/03/11 无线电
56.com视频采集接口程序(PHP)
2007/09/22 PHP
ThinkPHP实现跨模块调用操作方法概述
2014/06/20 PHP
THINKPHP项目开发中的日志记录实例分析
2014/12/01 PHP
PHP实现上一篇下一篇的方法实例总结
2016/09/22 PHP
php利用ob_start()清除输出和选择性输出的方法
2018/01/18 PHP
php strftime函数的详细用法
2018/06/21 PHP
thinkphp框架无限级栏目的排序功能实现方法示例
2020/03/29 PHP
如何简单地用YUI做JavaScript动画
2007/03/10 Javascript
xml 封装与解析(javascript和C#中)
2009/07/26 Javascript
JavaScript获取元素尺寸和大小操作总结
2015/02/27 Javascript
JavaScript程序设计之JS调试
2015/12/09 Javascript
JavaScript自学笔记(必看篇)
2016/06/23 Javascript
Vue-router结合transition实现app前进后退动画切换效果的实例
2017/10/11 Javascript
JS实现带动画的回到顶部效果
2017/12/28 Javascript
Bootstrap Table实现定时刷新数据的方法
2018/08/13 Javascript
vue实现文字横向无缝走马灯组件效果的实例代码
2019/04/09 Javascript
js+html实现点名系统功能
2019/11/05 Javascript
ES6如何用一句代码实现函数的柯里化
2020/01/18 Javascript
Element Badge标记的使用方法
2020/07/27 Javascript
vue data有值,但是页面{{}} 取不到值的解决
2020/11/09 Javascript
[03:44]2015国际邀请赛选手档案—Cloud9.NoTail
2015/07/28 DOTA
Python生成随机密码的方法
2017/06/16 Python
关于python多重赋值的小问题
2019/04/17 Python
使用分层画布来优化HTML5渲染的教程
2015/05/08 HTML / CSS
英国奢侈品网站:MatchesFashion
2016/12/16 全球购物
extern是什么意思
2016/03/10 面试题
小学生爱国演讲稿
2014/04/25 职场文书
知识改变命运演讲稿
2014/05/21 职场文书
开学典礼策划方案
2014/05/28 职场文书
开展批评与自我批评发言材料
2014/10/17 职场文书
党员作风建设整改方案
2014/10/27 职场文书
学前班学生评语
2014/12/29 职场文书
2015年高中班主任工作总结
2015/04/30 职场文书
python Tkinter的简单入门教程
2021/04/11 Python
Javascript中async与await的捕捉错误详解
2022/03/03 Javascript