JavascriptはDOM元素のイベントを処理してコードを実現します.
8540 ワード
DOM元素には標準的なイベントがあります.一般的にはOclick=functionの方式を使えばいいですが、DOM要素に複数のイベントを追加したり、イベントを削除したり、Javascriptでコントロールをカプセル化したりする場合、パッケージのコントロールにカスタムイベントを追加する場合、Oclick=functionの方式は足りません.しかし、ブラウザには、addEvent ListenerとatachEventの方法があります.これによって、C〓の中のイベント依頼に似たイベントトリガメカニズムをシミュレートします.
/*
* ：
* Author：LQB
* ：2009-1-4
* #include JCore.js
*/
var JEvents = function(){
this.events={};
this.addEvent = function(o){//
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……*/){//
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);// 4
callArgs = typeof(callArgs)!="undefined"?callArgs:[];
var delegate = fn.createDelegate(callArgs,sp);//JCore
// fn ，
if(!fn.uid) {
var time = new Date();
fn.uid= ""+time.getMinutes()+time.getSeconds()+time.getMilliseconds();
}
// ，
delegate.uid = getCacheAttName(enFX,fn.uid);
if(typeof(this.events[enFX])!="object")
this.events[enFX]=[];
this.events[enFX].push(delegate);//
};
this.removeListener = function(eventName,fn){//
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"){//
var functions = this.events[enFX];
for(i=0;iif(functions[i].uid===AttName){// ，
this.events[enFX].remove(functions[i]);
break;
}
}
}
}
}
this.fireEvent = function(eName,eventArg){//
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"){// ，
var functions = this.events[enFX];
for(i=0;ifunctions[i].apply(window,Arg);
}
}
}
/*--------------------------------------- --------------------------------------*/
var getCacheAttName = function(eventName,fnuid){
return "handle-"+eventName+"-"+fnuid;
}
}
/*------------------------------------------------------ ， DOM element -----------------------------------------*/
var JEventsExtendMethod = {
cache : {// ， ，
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];//
this.eventCache[el].length--;
}
if(this.eventCache[el] && this.eventCache[el].length ==1)//
delete this.eventCache[el];
}
},
getCacheAttName : function(eventName,fnuid){
return "handle-"+eventName+"-"+fnuid;
},
bind : function(el,eventName,fn,scope/*,Args……*/){// 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);// 5
callArgs = typeof(callArgs)!="undefined"?callArgs:[];
var delegate = fn.createDelegate(callArgs,sp);//JCore
if (el.addEventListener){//Mozilla ,
el.addEventListener(enFX, delegate, false);//
} else if (el.attachEvent){// Mozilla ， ( )
el.attachEvent(enIE, delegate);
}
// fn ，
if(!fn.uid) {
var time = new Date();
fn.uid= ""+time.getMinutes()+time.getSeconds()+time.getMilliseconds();
}
if(!el.id){
el.id = JCore.id(el,null);
}
// ，
var AttName = this.getCacheAttName(enFX,fn.uid);
this.cache.setCache(el.id,AttName,delegate);
},
unbind : function(el,eventName,fn){// 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
el.removeEventListener(enFX, delegate, false);
} else if (el.detachEvent){// Mozilla
el.detachEvent(enIE, delegate);
}
}
//
this.cache.removeCache(el.id,AttName);
}
}
JCore.apply(JEvents,JEventsExtendMethod);
/*-------------------------------- event ---------------------------------*/
var JEventWrap = function(event){
this.xtype="EventWrap";
this.data=null;
this.srcElement = null; //
this.button = null; //[FX:0- ，1- ，2- ][IE:1- ，2- ，4- ]( onmousedown, onmouseup,onmousemove )
this.type = null;
this.clientX = 0; // X ( )
this.clientY = 0; // Y ( )
this.offsetX = 0; // X ( )(IE)
this.offsetY = 0; // Y ( )(IE)
this.screenX = 0; // X ( )(FX)
this.screenY = 0; // Y ( )(FX)
this.altKey = false; // Alt
this.ctrlKey = false; // Ctrl ，
this.shitfKey = false; // Shift
this.keyCode = 0;
this.originaEvent = null; //
/*---- -----*/
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;
}
}