シンプルなオンとオフメソッドを実装します
導入:
イベントオブジェクト:
Funclist:{}、// Delegateにバインドされたメソッドを保存します
iefunclist:{} // IEの下でバインディングメソッドを保存します
イベントオブジェクトのオンとオフメソッドは主に呼ばれます
event.addevent、event.delegatehandleメソッド
Event.Addevent:基礎となるAddEventListenerに電話して、リスニングイベントを追加します
event.DelegateHandle:イベントが発生したとき、イベントが泡立っているときに、イベントデリゲートの要素を決定し、対応するコールバック関数を実行します。
AddEvent / Offevent:
obj.addeventlistener(type、fn、false);
obj.RemoveEventListener(Type、FN、False);
code -event.js
/** * AddEvent *著者[email protected] */window.event = {}; var event = {funclist:{}、// iefunclist:{}、//メソッドを保存します。 var fnnew = event.delegateHandle(obj、selector、fn); event.Addevent(obj、type、fnnew); /*バインディングメソッドをevent.funclistのバインディング操作のためのfunclist後で*/ if(!event.funclist [selector]){event.funclist [selector] = {}; } if(!event.funclist [selector] [type]){event.funclist [selector] [type] = {}; } event.funclist [selector] [type] [fn] = fnnew; }、off:function(obj、selector、type、fn){if(!obj ||!selector ||!event.funclist [selector]){return false; } var fnnew = event.funclist [selector] [type] [fn]; if(!fnnew){return; } event.offevent(obj、type、fnnew); event.funclist [selector] [type] [fn] = null; }、DelegateHandle:function(obj、selector、fn){ /*デリゲートの変換方法を実装します。コールバック関数は、イベントが泡立って上昇する場合にのみ実行されます。 */ var func = function(event){var event = event || window.event; var target = event.srcelement || event.target; var parent =ターゲット;関数は(item、elmname){if(elmname.split( '#')[1]){// id if(item.id && item.id === elmname.split( '#')[1]){return true; }} if(elmname.split( '。')[1]){// class if(hasclass(item、elmname.split( '。')[1])){return true; }} if(item.tagname == elmname.touppercase()){return true; // by tagname} falseを返します。 } while(parent){ /*トリガーされた要素が(セレクター)要素の子である場合。 */ if(obj == parent){return false; //トリガー要素はそれ自体} if(cantaber(ared、selector)){fn.call(obj、event);戻る; } parent = parent.parentnode; }}; funcを返します。 }、addEvent:function(ターゲット、タイプ、fn){if(!ターゲット)return false; var add = function(obj){if(obj.addeventlistener){obj.addeventlistener(type、fn、false); } else {// ie if(!event.ied.iefunclist [obj])event.iefunclist [obj] = {}; if(!event.ied.iefunclist [obj] [type])event.iefunclist [obj] [type] = {}; event.iefunclist [obj] [type] [fn] = function(){fn.apply(obj、arguments); }; obj.attachevent( "on" + type、event.iefunclist [obj] [type] [fn]); }} if(target.length> = 0 && target!== windole &&!target.tagname){for(var i = 0、l = target.length; i <l; i ++){add(target [i])}} elfy {add(ターゲット); }}、offevent:function(target、type、fn){if(!target)return false; var remove = function(obj){if(obj.addeventlistener){obj.removeeventlistener(type、fn、false); } else {// ie if(!event.iefunclist [obj] ||!event.ief.iefunclist [obj] [type] ||!event.ief.iefunclist [obj] [type] [fn]){return; } obj.detachevent( "on" + type、event.iefunclist [obj] [type] [fn]、false); event.iefunclist [obj] [type] [fn] = {}; }} if(target.length> = 0 && target!== windole &&!target.tagname){for(var i = 0、l = target.length; i <l; i ++){remove(target [i])}} elfy {remove(target); }}、};
コード-demo.html
<!Doctype html> <html> <head> <meta charset = "utf-8"> <title>テスト</title> </head> <body> <p>テストイベント</p> <div id = content> <ul> <li> <ボタンID = "btn1"> 1 </button> </li> <butth </</</</</</</</</li> <butth id = "btn3"> 3 </button> </li> <li> <button id = "btn4"> 4 </button> </li> <li> <button id = "btn5"> 5 </button> </li> </ul> <ボタンid = "unbind"> unbinding </button> </div src = "addevent.js"> </script> <script>(function(){/* demo demo*/var $ id = function(id){return document.getelementbyid(id)|| outer = $ id( "content")、btn = $ id( "text"); event. 'newbut.createlement( "newbtnchild);ターゲット= e.target.log(ターゲット); }})(); </script> </body> </html>