JavaScript 事件绑定与处理的兼容写法汇总

事件绑定基础实现

事件绑定

 
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 与 input 事件处理

处理 onpropertychange 事件

onpropertychange 是微软引入的一个事件，当元素属性发生变化时触发，例如文本长度或样式的改变。Firefox 中类似的事件为 oninput，但它仅针对 textfield 和 textarea 的 value 属性。Safari、Firefox、Chrome 与 Opera 均支持 oninput 属性。

 
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 事件一览表

最后附上 DOM3.0 事件一览表

作者:Ruby's Louvre