Some compatible methods for binding javascript processing events

Bind event
Copy codeThe Code is as follows:
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] ();
});
}
};

Another implementation
Copy codeThe Code is as follows:
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 );
});
}
}
})();

Bind an onpropertychange event

Onpropertychange is an event made by Microsoft. It is triggered when the attribute of an element changes. Common events include text Length changes and Sample Length changes, FF is similar to it in terms of the oninput event, but it only applies to the value attribute of textfield and textarea. Both safari, firefox, chrome, and opera support this attribute.
Copy codeThe Code is as follows:
Var addPropertyChangeEvent = function (obj, fn ){
If (window. ActiveXObject ){
Obj. onpropertychange = fn;
} Else {
Obj. addEventListener ("input", fn, false );
}
}

Remove event
Copy codeThe Code is as follows:
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;
}
};

Load events
Copy codeThe Code is as follows:
Var loadEvent = function (fn ){
Var oldonload = window. onload;
If (typeof window. onload! = 'Function '){
Window. onload = fn;
} Else {
Window. onload = function (){
Oldonload ();
Fn ();
}
}
}

Block events
Copy codeThe Code is as follows:
Var stopEvent = function (e ){
E = e | window. event;
If (e. preventDefault ){
E. preventDefault ();
E. stopPropagation ();
} Else {
E. returnValue = false;
E. cancelBubble = true;
}
}

If you only prevent event bubbles
Copy codeThe Code is as follows:
Var stopPropagation = function (e ){
E = e | window. event;
If (! + "\ V1 "){
E. cancelBubble = true;
} Else {
E. stopPropagation ();
}
}

Get event source object

Equivalent to Event. element (e) of Prototype. js framework)
Copy codeThe Code is as follows:
Var getEvent = function (e ){
E = e | window. event;
Var target = event. srcElement? Event. srcElement: event.tar get;
Return target
}

Or this feature is more powerful. I developed it when developing the datagrid. For details about the usage, see "step by step to teach you how to implement table sorting (Part 2)".
Copy codeThe Code is as follows:
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.tar get,
CurrentN = target. nodeName. toLowerCase (),
ParentN = target. parentNode. nodeName. toLowerCase (),
GrandN = target. parentNode. parentNode. nodeName. toLowerCase ();
Return [e, target, currentN, parentN, grandN];
}

A list of DOM3.0 events is attached.

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

Author: Ruby's Louvre