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 程序编码规范
Nov 23 Javascript
JQuery文本框高亮显示插件代码
Apr 02 Javascript
写自已的js类库需要的核心代码
Jul 16 Javascript
javaScript 删除字符串空格多种方法小结
Oct 24 Javascript
jQuery使用一个按钮控制图片的伸缩实现思路
Apr 19 Javascript
JS实现根据出生年月计算年龄
Jan 10 Javascript
jQuery实现网页顶部固定导航效果代码
Dec 24 Javascript
jquery日历插件datepicker用法分析
Jan 22 Javascript
Js 获取当前函数参数对象的实现代码
Jun 20 Javascript
jQuery内容筛选选择器实例代码
Feb 06 Javascript
详解vue数据渲染出现闪烁问题
Jun 29 Javascript
jQuery实现动画、消失、显现、渐出、渐入效果示例
Sep 06 jQuery
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
检查php文件中是否含有bom的函数
2012/05/31 PHP
PHP 7安装使用体验之性能大提升,兼容性强,扩展支持不够(升级PHP要谨慎)
2017/07/27 PHP
javascript iframe中打开文件,并检测iframe存在否
2008/12/28 Javascript
js对table的td进行相同内容合并示例详解
2013/12/27 Javascript
使用jquery中height()方法获取各种高度大全
2014/04/02 Javascript
使用jQuery实现返回顶部
2015/01/26 Javascript
MVC Ajax Helper或Jquery异步加载部分视图
2015/11/29 Javascript
jQueryUI中的datepicker使用方法详解
2016/05/25 Javascript
Three.js实现浏览器变动时进行自适应的方法
2017/09/26 Javascript
Vue实现todolist删除功能
2018/06/26 Javascript
从Vuex中取出数组赋值给新的数组,新数组push时报错的解决方法
2018/09/18 Javascript
小程序视频或音频自定义可拖拽进度条的示例代码
2018/09/30 Javascript
JavaScript数组去重的方法总结【12种方法,号称史上最全】
2019/02/28 Javascript
JS数组splice操作实例分析
2019/10/12 Javascript
[56:46]2018DOTA2亚洲邀请赛 3.31 小组赛 B组 VP vs Effect
2018/04/01 DOTA
python基础教程之对象和类的实际运用
2014/08/29 Python
python字符类型的一些方法小结
2016/05/16 Python
python十进制和二进制的转换方法(含浮点数)
2018/07/07 Python
Python 运行 shell 获取输出结果的实例
2019/01/07 Python
python3实现字符串操作的实例代码
2019/04/16 Python
基于python2.7实现图形密码生成器的实例代码
2019/11/05 Python
Python Tornado之跨域请求与Options请求方式
2020/03/28 Python
jenkins+python自动化测试持续集成教程
2020/05/12 Python
带你学习Python如何实现回归树模型
2020/07/16 Python
详解css3中的伪类before和after常见用法
2020/11/17 HTML / CSS
Skyscanner波兰:廉价航班
2017/11/07 全球购物
Fanatics英国官网:美国体育电商
2018/11/06 全球购物
美国在线眼镜店:GlassesShop
2018/11/15 全球购物
你常见到的runtime exception
2016/09/05 面试题
销售找工作求职信
2013/12/20 职场文书
安全生产投入制度
2014/01/29 职场文书
岗位职责风险点
2014/03/12 职场文书
艺术教育实施方案
2014/05/03 职场文书
信用卡工作证明模板
2014/09/14 职场文书
复兴之路纪录片观后感
2015/06/02 职场文书
MYSQL 运算符总结
2021/11/11 MySQL