Javascript code for DOM element event processing-javascript tips-js tutorial

DOM elements have some standard events. Generally, you only need to use the onclickfunction method. However, when you need to add multiple events to the DOM element, delete the event, or when Javascript is used to encapsulate controls, DOM elements have some standard events when a custom event is added to the encapsulated controls, generally, you only need to use The onclick = function method. However, when you need to add multiple events to the DOM element, delete events, or encapsulate controls using Javascript, when a custom event is added to an encapsulated control, The onclick = function method is not enough, but the browser has the addEventListener and attachEvent methods available for calling, this simulates an event trigger mechanism similar to the event Delegate in C!

The Code is as follows:

/*
* Function: Event Processing
* Author: LQB
* Time: 2009-1-4
* # Include JCore. js
*/
Var JEvents = function (){
This. events = {};
This. addEvent = function (o) {// Add event
If (typeof o = 'string') {/* strArg1, strArg2 ...... */
For (var I = 0, a = arguments, v; v = a [I]; I ++ ){
V = v. toString (). toLowerCase ();
Var enFX = v. indexOf ("on") = 0? V. substr (2): v;
If (! This. events [enFX]) {
This. events [enFX] = true;
}
}
} Else {
JCore. apply (this. events, o, false );
}
};
This. addListener = function (eventName, fn, scope/*, Args ...... */) {// Add a processing method for the event
If (typeof (eventName )! = "String" | eventName. lenght = 0) return;
If (typeof (fn )! = "Function") return;
EventName = eventName. toString (). toLowerCase ();
Var enFX = eventName. indexOf ("on") = 0? EventName. substr (2): eventName;
If (! This. events [enFX]) {
Throw "Error! Event/"" + eName + "/" doesnt exist ."
}
Var sp = scope | window;
Var callArgs = Array. prototype. slice. call (arguments, 3); // starts with 4th Parameters
CallArgs = typeof (callArgs )! = "Undefined "? CallArgs: [];
Var delegate = fn. createDelegate (callArgs, sp); // supported by JCore
// Create a tag for the fn method and use it when deleting an event
If (! Fn. uid ){
Var time = new Date ();
Fn. uid = "" + time. getMinutes () + time. getSeconds () + time. getMilliseconds ();
}
// Mark the delegate and use it when deleting event binding
Delegate. uid = getCacheAttName (enFX, fn. uid );
If (typeof (this. events [enFX])! = "Object ")
This. events [enFX] = [];
This. events [enFX]. push (delegate); // Add the method to the event list.
};
This. removeListener = function (eventName, fn) {// remove event binding
If (eventName & fn ){
EventName = eventName. toString (). toLowerCase ();
Var enFX = eventName. indexOf ("on") = 0? EventName. substr (2): eventName;
Var AttName = getCacheAttName (enFX, fn. uid );
If (typeof (this. events [enFX]) = "object") {// this event exists
Var functions = this. events [enFX];
For (I = 0; I If (functions [I]. uid = AttName) {// locate and delete
This. events [enFX]. remove (functions [I]);
Break;
}
}
}
}
}
This. fireEvent = function (eName, eventArg) {// trigger event
EName = eName. toString (). toLowerCase ();
Var enFX = eName. indexOf ("on") = 0? EName. substr (2): eName;
Var Arg = new Array ();
If (typeof (eventArg )! = "Undefined "){
If (typeof (eventArg) = "array") Arg = eventArg;
Else Arg. push (eventArg );
}
If (typeof (this. events [enFX]) = "object") {// this event exists and an event handling method is added.
Var functions = this. events [enFX];
For (I = 0; I Functions [I]. apply (window, Arg );
}
}
}
/* --------------------------------------- Private method --------------------------------------*/
Var getCacheAttName = function (eventName, fnuid ){
Return "handle-" + eventName + "-" + fnuid;
}
}
/* ---------------------------------------------------- The following static methods are used to process DOM element events -----------------------------------------*/
Var JEventsExtendMethod = {
Cache: {// time processing cache, used to mark the processing methods of each event, used to delete the event
EventCache :{},
SetCache: function (el, Name, value ){
If (typeof (this. eventCache [el])! = "Object "){
This. eventCache [el] = {length: 1 };
}
This. eventCache [el] [Name] = value;
This. eventCache [el]. length ++;
},
GetCache: function (el, Name ){
If (typeof (this. eventCache [el]) = "object ")
Return this. eventCache [el] [Name];
Else
Return null;
},
RemoveCache: function (el, Name ){
If (typeof (this. eventCache [el]) = "object "){
Delete this. eventCache [el] [Name]; // delete an attribute
This. eventCache [el]. length --;
}
If (this. eventCache [el] & this. eventCache [el]. length = 1) // clear
Delete this. eventCache [el];
}
},
GetCacheAttName: function (eventName, fnuid ){
Return "handle-" + eventName + "-" + fnuid;
},
Bind: function (el, eventName, fn, scope/*, Args ...... */) {// Add event handling methods for elment
If (typeof (el) = "undefined" | el = null) return;
If (typeof (eventName )! = "String" | eventName. lenght = 0) return;
If (typeof (fn )! = "Function") return;
Var indexOfon = eventName. toString (). toLowerCase (). indexOf ("on ");
Var enIE = indexOfon = 0? EventName: "on" + eventName;
Var enFX = indexOfon = 0? EventName. substr (2): eventName;
Var sp = scope | window;
Var callArgs = Array. prototype. slice. call (arguments, 4); // starts with 5th Parameters
CallArgs = typeof (callArgs )! = "Undefined "? CallArgs: [];
Var delegate = fn. createDelegate (callArgs, sp); // supported by JCore
If (el. addEventListener) {// Mozilla series, executed in queue order
El. addEventListener (enFX, delegate, false); // The third parameter is related to the trigger method.
} Else if (el. attachEvent) {// non-Mozilla series, executed in the stack Order (events added after execution)
El. attachEvent (enIE, delegate );
}
// Create a tag for the fn method and use it when deleting an event
If (! Fn. uid ){
Var time = new Date ();
Fn. uid = "" + time. getMinutes () + time. getSeconds () + time. getMilliseconds ();
}
If (! El. id ){
El. id = JCore. id (el, null );
}
// Mark the delegate and use it when deleting event binding
Var AttName = this. getCacheAttName (enFX, fn. uid );
This. cache. setCache (el. id, AttName, delegate );
},
Unbind: function (el, eventName, fn) {// unbind event for elment
If (typeof (el) = "undefined" | el = null) return;
Var indexOfon = eventName. toString (). toLowerCase (). indexOf ("on ");
Var enIE = indexOfon = 0? EventName: "on" + eventName;
Var enFX = indexOfon = 0? EventName. substr (2): eventName;
Var AttName = this. getCacheAttName (enFX, fn. uid );
Var delegate = this. cache. getCache (el. id, AttName );
If (delegate ){
If (el. removeEventListener) {// Mozilla Series
El. removeEventListener (enFX, delegate, false );
} Else if (el. detachEvent) {// non-Mozilla Series
El. detachEvent (enIE, delegate );
}
}
// Delete the event Cache
This. cache. removeCache (el. id, AttName );
}
}
JCore. apply (JEvents, JEventsExtendMethod );
/* -------------------------------- Encapsulate event parameters ---------------------------------*/
Var JEventWrap = function (event ){
This. xtype = "EventWrap ";
This. data = null;
This. srcElement = null; // document element in which an event occurs
This. button = null; // [FX: 0-left, 1-center, 2-right] [IE: 1-left, 2-right, 4-middle Keys] (only valid for onmousedown, onmouseup, and onmousemove)
This. type = null;
This. clientX = 0; // The X coordinate of the mouse pointer relative to the client area or browser window (Standard attribute)
This. clientY = 0; // Y coordinate of the mouse pointer relative to the client area or browser window (Standard attribute)
This. offsetX = 0; // The X coordinate (compatible attribute) (IE) of the mouse pointer relative to the Source Element)
This. offsetY = 0; // Y coordinate (compatible attribute) (IE) of the mouse pointer relative to the Source Element)
This. screenX = 0; // The X coordinate (compatible attribute) (FX) of the cursor relative to the upper left corner of the user's display)
This. screenY = 0; // Y coordinate (compatible attribute) (FX) of the mouse pointer relative to the upper left corner of the user's display)
This. altKey = false; // whether the Alt key is used
This. ctrlKey = false; // whether to press Ctrl,
This. shitfKey = false; // whether to Shift the key
This. keyCode = 0;
This. originaEvent = null; // unwrapped original event object
/* ---- Construct -----*/
If (event ){
If (event. srcElement) {// IE
This. srcElement = event. srcElement;
This. offsetX = event. offsetX;
This. offsetY = event. offsetY;
This. button = event. button;
}
Else {
This. srcElement = event.tar get;
This. offsetX = event. clientX-event.tar get. offsetLeft;
This. offsetY = event. clientY-event.tar get. offsetTop;
}
This. type = event. type;
This. altKey = event. altKey;
This. ctrlKey = event. ctrlKey;
This. shitfKey = event. shitfKey;
This. clientX = event. clientX;
This. clientY = event. clientY;
This. screenX = event. screenX;
This. screenY = event. screenY;
This. keyCode = event. keyCode;
This. originaEvent = event;
}
}

For the JCore. js file, see the previous log: code supported by the object-oriented Javascript Core