シンプルなオンとオフメソッドを実装します
導入：
イベントオブジェクト：
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>