간단한 온 및 오프 방법을 구현하십시오
소개하다:
이벤트 개체 :
funclist : {}, // 델리게이트가 바인딩 된 메소드를 저장합니다
IEFUNCLIST : {} // IE에서 바인딩 메소드를 저장합니다
이벤트 객체의 켜기 및 꺼짐 메소드를 주로
event.adevent, event.delegateHandle 메서드
event.adevent : 기본 addeventListener에 전화하여 청취 이벤트를 추가하십시오.
event.DelegateHandle : 이벤트가 발생하면 이벤트가 기포 될 때 이벤트가 이벤트의 요소를 결정하고 해당 콜백 함수를 실행합니다.
addevent / offevent :
obj.addeventListener (유형, fn, false);
obj.removeeventListener (유형, fn, false);
코드 - event.js
/** * addevent * audertevent * author [email protected] */wind var fnnew = event.delegateHandle (OBJ, 선택기, FN); event.addevent (obj, type, fnnew); /* 바인딩 메소드를 이벤트에 저장합니다. } 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 (이벤트) {var event = event || Window.event; var target = event.srcelement || 이벤트. 표적; var parent = target; 함수는 (item, elmname) {if (elmname.split ( '#') [1]) {// id if (item.id && item.id == elmname.split ( '#') [1]) {return true; }} if (elmname.split ( '.') }} if (item.tagname == elmname.toupperCase ()) {return true; // tagname} return false; } while (parent) { /* 트리거 된 요소가 (선택기) 요소의 자녀 인 경우. */ if (obj == parent) {return false; // 트리거 요소 자체가} if (contain (parent, selector)) {fn.call (obj, event); 반품; } parent = parent.parentNode; }}; 반환 핵; }, addevent : 함수 (target, type, fn) {if (! target) return false; var add = function (obj) {if (obj.adeventListener) {obj.addeventListener (type, fn, false); } else {// if (! event.iefunclist [obj]) event.iefunclist [obj] = {}; if (! event.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! == Wind }}, offevent : 함수 (target, type, fn) {if (! target) return false; var remain = function (obj) {if (obj.adeventListener) {obj.removeEventListener (type, fn, false); } else {// if (! event.iefunclist [obj] ||! event.iefunclist [obj] [type] | ||! event.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! == Wind }},};
코드 -Demo.html
<! docType html> <html> <head> <meta charset = "utf-8"> <title> test </title> </head> <pod> <p> 테스트 이벤트 </p> <div id = content> <ul> <li> <button id = "btn1"> 1 </button> <li> <li> <li> <li> id = "btn3"> 3 </button> </li> <li> <버튼 id = "btn4"> 4 </button> </li> <li> <버튼 id = "btn5"> 5 </li> </ul> <버튼 id = "unbind"> unbinding </button> </div> <p id = = "text"> src = "addevent.js"> </script> <cript> (function () {/* 데모 데모*/var $ id = function (id) {return document.getElementByid (id) || id;} var outer = $ id ( "content"), btn = $ id ( "text"); event.on (outer, 'button', "click", event.on, '#unbind', "click"; event; e.srcelement || }}) (); </script> </body> </html>