DOM elements have standard events that you can use only when using onclick=function, but when you need to add multiple events to a DOM element, delete events, or add custom events to a encapsulated control when you encapsulate a control with JavaScript, Onclick=function is not enough, but browsers have AddEventListener and Attachevent methods to invoke to simulate event-triggering mechanisms similar to the event delegates in C #!
Copy Code code as follows:
/*
* Function: Event handling
* 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 ... The way to pass the parameter * *
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 to 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);//Starting with the 4th argument
Callargs = typeof (Callargs)!= "undefined" callargs:[];
var delegate = fn.createdelegate (CALLARGS,SP);//jcore support
Creates a tag for the FN method that is used when deleting an event
if (!fn.uid) {
var time = new Date ();
Fn.uid= "" +time.getminutes () +time.getseconds () +time.getmilliseconds ();
}
Mark delegates, using when deleting event bindings
Delegate.uid = Getcacheattname (Enfx,fn.uid);
if (typeof (This.events[enfx])!= "Object")
This.events[enfx]=[];
This.events[enfx].push (delegate);//Add method to Event list
};
This.removelistener = function (EVENTNAME,FN) {//removing event bindings
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") {//existence of this event
var functions = This.events[enfx];
for (i=0;i<functions.length;i++) {//Find each method in turn
if (functions[i].uid===attname) {//Find, 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 the event-handling method is added
var functions = This.events[enfx];
for (i=0;i<functions.length;i++) {//triggering all methods in turn
Functions[i].apply (WINDOW,ARG);
}
}
}
/*---------------------------------------Private Method--------------------------------------* *
var getcacheattname = function (eventname,fnuid) {
Return "handle-" +eventname+ "-" +FNUID;
}
}
/*------------------------------------------------------The following is a static method for handling DOM Element's Event-----------------------------------------* *
var Jeventsextendmethod = {
Cache: {//Time processing caching, used to mark individual event handling methods, when deleting an 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];//Remove attributes
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 method to 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);//Starting with the 5th argument
Callargs = typeof (Callargs)!= "undefined" callargs:[];
var delegate = fn.createdelegate (CALLARGS,SP);//jcore support
if (El.addeventlistener) {//mozilla series, executed in queue order
El.addeventlistener (Enfx, delegate, false);//The third parameter is related to the trigger mode
else if (el.attachevent) {//Non-Mozilla series, executed in stack order (followed by events first)
El.attachevent (EnIE, delegate);
}
Creates a tag for the FN method that is used 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 delegates, using when deleting event bindings
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 Event Cache
This.cache.removeCache (El.id,attname);
}
}
Jcore.apply (Jevents,jeventsextendmethod);
/*--------------------------------The parameters of the event packaging---------------------------------* *
var jeventwrap = function (event) {
This.xtype= "Eventwrap";
This.data=null;
This.srcelement = null; The document element in which the event occurred
This.button = null; [fx:0-left key, 1-middle key, 2-right key][ie:1-left key, 2-right key, 4-medium key] (only for onmousedown, onmouseup,onmousemove valid)
This.type = null;
This.clientx = 0; The x-coordinate of the mouse pointer relative to the client area or browser window (standard properties)
This.clienty = 0; The y-coordinate of the mouse pointer relative to the client area or browser window (standard properties)
This.offsetx = 0; X-coordinate of the mouse pointer relative to the source element (compatible properties) (IE)
this.offsety = 0; The y-coordinate of the mouse pointer relative to the source element (compatible properties) (IE)
This.screenx = 0; The mouse pointer relative to the upper-left corner of the user's display (compatible properties) (FX)
This.screeny = 0; mouse pointer relative to the upper left corner of the user's display (compatible properties) (FX)
This.altkey = false; Whether the ALT key
This.ctrlkey = false; Is the CTRL key,
This.shitfkey = false; is the SHIFT key
This.keycode = 0;
This.originaevent = null; Raw Event Object Not wrapped
/*----CONSTRUCTION-----* *
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.target;
This.offsetx = Event.clientx-event.target.offsetleft;
This.offsety = Event.clienty-event.target.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;
}
}
where Jcore.js file See previous log: Object-oriented JavaScript core support code
