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


有用  |  无用 取消

猜你喜欢