javascript 處理事件綁定的一些兼容寫法

2019-11-21 00:52:35

字體：大中小

供稿：網(wǎng)友

綁定事件

 
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](); 
} ); 
} 
}; 

另一個實現(xiàn)

復(fù)制代碼代碼如下:

 
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是微軟制造的一個事件，它在一個元素的屬性發(fā)生變化的時候觸發(fā)，常見的有文本的長度改變，樣長改變等，F(xiàn)F大致和它相似的屬性為oninput事件，不過它只針對textfield與textarea的value屬性。safari，firefox，chrome與 opera都支持此屬性。

復(fù)制代碼代碼如下:

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

移除事件

復(fù)制代碼代碼如下:

 
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; 
} 
}; 

加載事件

復(fù)制代碼代碼如下:

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

阻止事件

復(fù)制代碼代碼如下:

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

如果僅僅是阻止事件冒泡

復(fù)制代碼代碼如下:

 
var stopPropagation = function(e) { 
e = e || window.event; 
if (!+"/v1") { 
e.cancelBubble = true; 
} else { 
e.stopPropagation(); 
} 
} 

取得事件源對象

相當(dāng)于Prototype.js框架的Event.element(e)

復(fù)制代碼代碼如下:

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

或者這個功能更強大，我在開發(fā)datagrid時開發(fā)出來的，詳細用法見《一步步教你實現(xiàn)表格排序（第二部分）》。

復(fù)制代碼代碼如下:

 
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]; 
} 