تنفيذ طريقة بسيطة وخارجها
يقدم:
كائن الحدث:
Funclist: {} ، // حفظ الطريقة ملزمة من قبل المندوب
IefunClist: {} // احفظ طريقة الربط تحت IE
تسمى أساليب ON and OFF في كائن الحدث بشكل رئيسي
event.addevent ، event.delegateHandle أساليب
event.addevent: اتصل بـ AddeventListener الأساسي لإضافة حدث الاستماع
event.delegateHandle: عندما يحدث حدث ما ، كما يشرب الحدث ، حدد عنصر مندوب الحدث ، وتنفيذ وظيفة رد الاتصال المقابلة.
addevent / Offevent:
obj.addeventListener (النوع ، fn ، false) ؛
OBJ.RemoveEventListener (النوع ، fn ، false) ؛
رمز - event.js
/** * addevent * uptor [email protected] */window.event = {} ؛ var event = {funclist: {} ، var fnnew = event.delegateHandle (obj ، selector ، fn) ؛ event.addevent (obj ، type ، fnnew) ؛ /* حفظ الطريقة المربوطة في event.funclist لعمليات عدم الترويج لاحقًا*/ if (! event.funClist [concector]) {event.funclist [cearctor] = {} ؛ } if (! event.funclist [selector] [type]) {event.funClist [concector] [type] = {} ؛ } event.funclist [selector] [type] [fn] = fnnew ؛ } ، OFF: function (obj ، selector ، type ، fn) {if (! obj ||! celector ||! event.funclist [concector]) {return false ؛ } var fnnew = event.funclist [selector] [type] [fn] ؛ if (! fnnew) {return ؛ } event.offevent (obj ، type ، fnnew) ؛ event.funclist [selector] [type] [fn] = null ؛ } ، depateHandle: function (obj ، selector ، fn) { /* قم بتنفيذ طريقة تحويل المندوب. لن يتم تنفيذ وظيفة رد الاتصال إلا عندما تنفذ فقاعات الحدث وترتفعها. */ var func = function (event) {var event = event || window.event ؛ var target = event.srcelement || Event.Target ؛ var parent = target ؛ تحتوي الدالة على (العنصر ، elmname) {if (elmname.split ('#') [1]) {// by id if (item.id && item.id === elmname.split ('#') [1]) {return true ؛ }} if (elmname.split ('.') [1]) {// by class if (hasclass (item ، elmname.split ('.') [1])) {return true ؛ }} if (item.tagname == elmname.toupperCase ()) {return true ؛ // بواسطة tagname} إرجاع خطأ ؛ } بينما (الأصل) { /* إذا كان العنصر المشغول هو طفل من العنصر (المحدد). */ if (obj == parent) {return false ؛ // عنصر المشغل هو نفسه} إذا (يحتوي (الوالد ، المحدد)) {fn.call (obj ، event) ؛ يعود؛ } parent = parent.parentNode ؛ }} ؛ إرجاع func } ، addevent: function (target ، type ، fn) {if (! target) return false ؛ var add = function (obj) {if (obj.addeventListener) {obj.addeventListener (type ، fn ، false) ؛ } else {// for ie if (! event.eafunclist [obj]) event.iefunclist [obj] = {} ؛ if (! event.eafunclist [obj] [type]) event.eafunclist [obj] [type] = {} ؛ event.eafunclist [obj] [type] [fn] = function () {fn.apply (obj ، mations) ؛ } ؛ obj.attachevent ("on" + type ، event.iefunclist [obj] [type] [fn]) ؛ }} if (target.length> = 0 && target! == window &&! target.tagname) {for (var i = 0 ، l = target.length ؛ i <l ؛ i ++) {add (target [i])}} else {add (target) ؛ }} ، Offevent: function (target ، type ، fn) {if (! target) return false ؛ var remove = function (obj) {if (obj.addeventListener) {obj.RemoveEventListener (type ، fn ، false) ؛ } else {// for ie if (! event.iefunclist [obj] ||! event.eafunclist [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! == window &&! target.tagname) {for (var i = 0 ، l = target.length ؛ i <l ؛ i ++) {remove (target [i])}} else {remove (target) ؛ }} ،} ؛
رمز - Demo.html
<! doctype html> <html> <head> <meta charset = "utf-8"> <title> اختبار </title> </head> <body> <p> اختبار الحدث </p> <div id = content> <ul> <li> <li> id = "btn3"> 3 </butting> </li> <li> <li> <button id = "btn4"> 4 </button> </li> <li> <button id = "btn5"> 5 </line> </li> </ul> <button id = "infind"> infing </butting> </p id = " src = "addevent.js"> </script> <script> (function () {/* demo demo*/var $ id = function (id) {return document.getElementById (id) || id ؛} var outer = $ id ("content") ، btn = $ id ("text") ؛ event.on (#undern "،" انقر ". var target = e.srcelement || e.target ؛ }}) () ؛ </script> </body> </html>