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 相关文章推荐
初学JavaScript第二章
Sep 30 Javascript
jquery text()方法取标签中的文本
Jul 25 Javascript
JavaScript实现查找字符串中第一个不重复的字符
Dec 29 Javascript
js实现简单的可切换选项卡效果
Apr 10 Javascript
JS密码生成与强度检测完整实例(附demo源码下载)
Apr 06 Javascript
如何使用jquery修改css中带有!important的样式属性
Apr 28 Javascript
Vue-cli proxyTable 解决开发环境的跨域问题详解
May 18 Javascript
vue中component组件的props使用详解
Sep 04 Javascript
Angular6笔记之封装http的示例代码
Jul 27 Javascript
vue component 中引入less文件报错 Module build failed
Apr 17 Javascript
如何利用Node.js与JSON搭建简单的动态服务器
Jun 16 Javascript
详解vue父子组件状态同步的最佳方式
Sep 10 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
PR值查询 | PageRank 查询
2006/12/20 PHP
php自定文件保存session的方法
2014/12/10 PHP
微信公众平台开发(五) 天气预报功能开发
2016/12/03 PHP
PHP合并数组函数array_merge用法分析
2017/02/17 PHP
PHP使用 Pear 进行安装和卸载包的方法详解
2019/07/08 PHP
jQuery学习2 选择器的使用说明
2010/02/07 Javascript
改进UCHOME的记录发布,增强可访问性用户体验
2011/01/17 Javascript
javascript计算用户打开网页的停留时间
2014/01/09 Javascript
javascript高级编程之函数表达式 递归和闭包函数
2015/11/29 Javascript
JavaScript实现写入文件到本地的方法【基于FileSaver.js插件】
2018/03/15 Javascript
JavaScript数组去重算法实例小结
2018/05/07 Javascript
浅谈React之状态(State)
2018/09/19 Javascript
ElementUI radio组件选中小改造
2019/08/12 Javascript
Vue前端判断数据对象是否为空的实例
2020/09/02 Javascript
python实现360皮肤按钮控件示例
2014/02/21 Python
python调用java的Webservice示例
2014/03/10 Python
详解Python3中的Sequence type的使用
2015/08/01 Python
tensorflow创建变量以及根据名称查找变量
2018/03/10 Python
PyCharm设置SSH远程调试的方法
2018/07/17 Python
解决python 未发现数据源名称并且未指定默认驱动程序的问题
2018/12/07 Python
Django组件之cookie与session的使用方法
2019/01/10 Python
Python容器类型公共方法总结
2020/08/19 Python
python操作链表的示例代码
2020/09/27 Python
python实现企业微信定时发送文本消息的示例代码
2020/11/24 Python
CSS3实现的渐变幻灯片效果
2020/12/07 HTML / CSS
IE9下html5初试小刀
2010/09/21 HTML / CSS
优秀应届毕业生推荐信
2014/02/18 职场文书
市场营销调查计划书
2014/05/02 职场文书
车间核算员岗位职责
2014/07/01 职场文书
结婚老公保证书
2015/02/26 职场文书
幼儿园大班个人总结
2015/02/28 职场文书
婚宴来宾致辞
2015/07/28 职场文书
先进个人事迹材料(2016推荐版)
2016/03/01 职场文书
pandas中DataFrame检测重复值的实现
2021/05/26 Python
java中重写父类方法加不加@Override详解
2021/06/21 Java/Android
Golang 1.18 多模块Multi-Module工作区模式的新特性
2022/04/11 Golang