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 获取iframe里页面中元素值的方法
Feb 17 Javascript
JavaScript实现防止网页被嵌入Frame框架的代码分享
Dec 29 Javascript
JavaScript实现打字效果的方法
Jul 10 Javascript
jqGrid用法汇总(全经典)
Jun 28 Javascript
thinkjs 文件上传功能实例代码
Nov 08 Javascript
浅谈Angular 中何时取消订阅
Nov 22 Javascript
angular项目中bootstrap-datetimepicker时间插件的使用示例
Mar 15 Javascript
在Vue中用canvas实现二维码和图片合成海报的方法
Jun 10 Javascript
vue 路由子组件created和mounted不起作用的解决方法
Nov 05 Javascript
Javascript组合继承方法代码实例解析
Apr 02 Javascript
webpack5 联邦模块介绍详解
Jul 08 Javascript
Ajax实现局部刷新的方法实例
Mar 31 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
Smarty安装配置方法
2008/04/10 PHP
php学习笔记 面向对象的构造与析构方法
2011/06/13 PHP
Prototype String对象 学习
2009/07/19 Javascript
ExtJs扩展之GroupPropertyGrid代码
2010/03/05 Javascript
优化javascript的执行效率一些方法总结
2013/12/25 Javascript
jQuery树形下拉菜单特效代码分享
2015/08/15 Javascript
jQuery下拉菜单的实现代码
2016/11/03 Javascript
bootstrap table之通用方法( 时间控件,导出,动态下拉框, 表单验证 ,选中与获取信息)代码分享
2017/01/24 Javascript
判断横屏竖屏(三种)
2017/02/13 Javascript
jquery easyui dataGrid动态改变排序字段名的方法
2017/03/02 Javascript
JavaScript实现设置默认日期范围为最近40天的方法分析
2017/07/12 Javascript
JS写XSS cookie stealer来窃取密码的步骤详解
2017/11/20 Javascript
Vue作用域插槽slot-scope实例代码
2018/09/05 Javascript
AngularJS实现的自定义过滤器简单示例
2019/02/02 Javascript
Vue实现页面添加水印功能
2019/11/09 Javascript
JS前端基于canvas给图片添加水印
2020/11/11 Javascript
python 从远程服务器下载东西的代码
2013/02/10 Python
python之wxPython应用实例
2014/09/28 Python
python 类详解及简单实例
2017/03/24 Python
python搭建服务器实现两个Android客户端间收发消息
2018/04/12 Python
在django中实现页面倒数几秒后自动跳转的例子
2019/08/16 Python
python随机模块random使用方法详解
2020/02/14 Python
HTML5 Canvas绘制圆点虚线实例
2015/01/01 HTML / CSS
加拿大领先的牛仔零售商:Bluenotes
2018/01/22 全球购物
如何使用PHP session
2015/04/21 面试题
什么是网络协议
2016/04/07 面试题
武汉瑞得软件笔试题
2015/10/27 面试题
若通过ObjectOutputStream向一个文件中多次以追加方式写入object,为什么用ObjectInputStream读取这些object时会产生StreamCorruptedException?
2016/10/17 面试题
高中生学习的自我评价
2013/12/14 职场文书
入党积极分子自我鉴定
2014/02/18 职场文书
国际商务英语专业求职信
2014/07/08 职场文书
村主任“四风”问题个人整改措施
2014/10/04 职场文书
务虚会发言材料
2014/12/25 职场文书
卖车协议书范文
2016/03/23 职场文书
python中Tkinter 窗口之输入框和文本框的实现
2021/04/12 Python
Golang二维数组的使用方式
2021/05/28 Golang