Javascript は DOM 要素イベント実装コードを処理します_javascript スキル

DOM 要素にはいくつかの標準イベントがあります。通常は、onclick=function を使用するだけで済みます。ただし、DOM 要素に複数のイベントを追加したり、イベントを削除したり、JavaScript を使用してコントロールをカプセル化する必要がある場合は、イベントをカスタマイズするときに onclick=function を追加します。メソッドだけでは十分ではありませんが、ブラウザーには呼び出すための addEventListener メソッドとattachEvent メソッドがあるため、C# のイベント委任に似たイベント トリガー メカニズムをシミュレートできます。

コードをコピー コードは次のとおりです:

/*
* 関数: イベント処理
* 作成者: 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 = argument, 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.length= =0)return;
if(typeof(fn)!="function")return;
イベント名 = イベント名.toString().toLowerCase(); )==0 ?eventName.substr(2) :eventName;
if(!this.events[enFX]){
throw "エラー! イベント /" "eName "/" が存在しません。 }
var sp =scope||window;
var callArgs = Array.prototype.slice.call(arguments, 3);// 4 番目のパラメータから開始します
callArgs = typeof(callArgs)!=" unknown"?callArgs :[];
var delegate = fn.createDelegate(callArgs,sp);//JCore は
をサポートします//fn メソッドのマークを作成し、
if(!fn.uid ) { イベントを削除する場合
var time = new Date();
fn.uid= "" time.getMinutes() time.getSeconds() time.getMilliseconds()
}
/ /Mark delegate, delete イベントをバインドするときは、
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) )//Move Except イベント バインディング
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 function = 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 Array();
if(typeof(eventArg)!="未定義"){ =="array ") Arg=eventArg;
else Arg.push(eventArg);
}
if(typeof(this.events[enFX])=="object"){//このイベント存在し、同時に追加されます イベント処理メソッド
var function = this.events[enFX];
for(i=0;ifunctions[i].apply (window,Arg);
}
}
}
/*-------- ---------- -----------プライベートメソッド---------------------------- ------- --*/
var getCacheAttName = function(eventName,fnuid){
return "handle-"eventName "-" fnuid;
}
}
/ *------ -------------------------------------- -------------以下は DOM 要素のイベントを処理するために使用される静的メソッドです------------------------ ----------------------- -*/
var JEventsExtendMethod = {
cache : {//各イベントをマークするために使用される時間処理キャッシュイベントを削除するときに使用される処理メソッド。
eventCache : {},
setCache : function( el,Name,value){
if(typeof(this.eventCache[el])!="object"){
this.eventCache[el]={長さ :1};
this.eventCache[el][名前]=値
this.eventCache[el].length
},
getCache : function(el,Name){
if(typeof(this .eventCache[el]) == "オブジェクト")
return this.eventCache[el][Name]; >else
return null;
},
removeCache : function(el, Name){
if(typeof(this.eventCache[el]) == "object"){
削除this.eventCache[el][Name];//属性を削除
this.eventCache[el ].length--;
}
if(this.eventCache[el] && this.eventCache[el] .length ==1)//Clear
delete this.eventCache[el];
}
},
getCacheAttName : function(eventName,fnuid){
return "handle-" イベント名"-" fnuid
},
bind : function(el,eventName,fn ,scope/*,Args……*/){//要素
if(typeof(el)=="unknown"||el==null)return;のイベント処理メソッドを追加します。
if(typeof(eventName)!="string"| | イベント名.length==0)return;
if(typeof(fn)!="function")return;
varindexOfon =eventName.toString().toLowerCase().indexOf("on");
var enIE =indexOfon==0?eventName:"on" イベント名;
var enFX =indexOfon==0?eventName.substr(2):eventName;
var sp =scope||window; 🎜>var callArgs = Array.prototype.slice.call(arguments, 4); // 5 番目のパラメータから開始
callArgs = typeof(callArgs)!="unknown"?callArgs:[]; = fn.createDelegate(callArgs,sp);//JCore は
if (el.addEventListener){//Mozilla シリーズをサポートし、キュー順に実行されます
el.addEventListener(enFX, delegate, false);// 3 番目のパラメータはトリガー メソッドに関連しています
} else if (el.attachEvent){//非 Mozilla シリーズ、スタック順に実行されます (後で追加されたイベントが最初に実行されます)
el.attachEvent(enIE, delegate) ;
}
// fn メソッドのタグを作成し、イベントを削除するときに使用します。 (!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){//要素のバインド解除イベント
if(typeof(el)=="未定義"||el==null) return;
varindexOfon =eventName.toString().toLowerCase().indexOf("on"); enIE =indexOfon==0?eventName:"on" イベント名;
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); ------------------------ ---イベントのパラメータ ラッパー------------------- --------------*/
var JEventWrap = 関数 (イベント){
this.xtype="EventWrap";
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 //ソース要素（互換属性）に対するマウスポインタのX座標（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 = イベント.offsetY;
this.button = イベント.button;
else{
this.srcElement =event.target;
this.offsetX = イベント。イベント.ターゲット.オフセット左;
この.オフセットY = イベント.クライアントY - イベント.ターゲット.オフセットトップ;
この.タイプ = イベント.タイプ;
この.altKey = イベント.altKey 🎜>this.ctrlKey =event.shitfKey;
this.clientX =event.clientX;
this.clientY =event.clientY;イベント.スクリーンX;
this.screenY = イベント.keyCode;
this.originaEvent = イベント; 🎜>JCore.js ファイルについては、前のブログを参照してください:
オブジェクト指向 Javascript コア サポート コード