javascript 處理事件綁定的一些相容寫法_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事件

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