Javascript處理DOM元素事件實現代碼
2024-05-06 14:21:56
供稿：網友
DOM元素都有一些標準事件，一般使用時只要使用onclick=function的方式就可以了，但是當需要為DOM元素添加多個事件，刪除事件，或在用Javascript封裝控件的時候，為封裝的控件添加自定義事件的時候，onclick=function的方式就不夠用了，但是瀏覽器有addEventListener和attachEvent方法可供調用，從而模擬出類似于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;i<functions.length;i++){//依次查找每個方法
if(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"){//存在此事件，同時添加了事件處理方法
