ใช้วิธีการเปิดและปิดอย่างง่าย
แนะนำ:
วัตถุเหตุการณ์:
funclist: {}, // บันทึกวิธีที่ถูกผูกไว้โดยผู้แทน
iefunclist: {} // บันทึกวิธีการเชื่อมโยงภายใต้ IE
วิธีการเปิดและปิดในวัตถุเหตุการณ์เรียกว่าส่วนใหญ่
Event.addevent, Event.delegateHandle Methods
Event.addevent: โทรหา addeventListener พื้นฐานเพื่อเพิ่มเหตุการณ์การฟัง
Event.delegateHandle: เมื่อเหตุการณ์เกิดขึ้นเมื่อเหตุการณ์เกิดขึ้นให้กำหนดองค์ประกอบของผู้แทนเหตุการณ์และดำเนินการฟังก์ชันการโทรกลับที่เกี่ยวข้อง
AddEvent / OffEvent:
obj.addeventListener (ประเภท, fn, false);
obj.removeeVentListener (ประเภท, fn, false);
รหัส - event.js
/** * addEvent * ผู้แต่ง [email protected] */window.event = {}; var event = {funclist: {}, // บันทึกวิธีที่ถูกผูกไว้เพื่อมอบหมาย iefunclist: {}, // เพราะวิธีการที่จะถูกบันทึกไว้ var fnnew = event.delegateHandle (OBJ, SELECTOR, FN); Event.addevent (OBJ, ประเภท, fnnew); /* บันทึกวิธีการที่ถูกผูกไว้ใน Event.funclist สำหรับการแยกการดำเนินการในภายหลัง*/ if (! event.funclist [ตัวเลือก]) {event.funclist [selector] = {}; } if (! Event.funclist [selector] [type]) {event.funclist [selector] [type] = {}; } event.funclist [ตัวเลือก] [type] [fn] = fnnew; }, ปิด: ฟังก์ชั่น (obj, ตัวเลือก, ประเภท, fn) {ถ้า (! obj ||! selector ||! event.funclist [ตัวเลือก]) {return false; } var fnnew = event.funclist [selector] [type] [fn]; ถ้า (! fnnew) {return; } event.offEvent (obj, type, fnnew); Event.funclist [ตัวเลือก] [type] [fn] = null; }, DelegateHandle: ฟังก์ชั่น (OBJ, Selector, FN) { /* ใช้วิธีการแปลงของตัวแทน ฟังก์ชั่นการโทรกลับจะถูกดำเนินการเฉพาะเมื่อมีฟองสบู่และเพิ่มขึ้น */ var func = function (เหตุการณ์) {var event = event || window.event; var target = event.srcelement || Event.target; var parent = เป้าหมาย; ฟังก์ชั่นประกอบด้วย (item, elmname) {ถ้า (elmname.split ('#') [1]) {// โดย id ถ้า (item.id && item.id === elmname.split ('#') [1]) {return true; }} if (elmname.split ('.') [1]) {// โดยคลาสถ้า (hasclass (item, elmname.split ('.') [1])) {return true; }} if (item.tagname == elmname.touppercase ()) {return true; // โดย tagname} return false; } ในขณะที่ (parent) { /* ถ้าองค์ประกอบที่ทริกเกอร์เป็นลูกขององค์ประกอบ (ตัวเลือก) */ if (obj == parent) {return false; // องค์ประกอบทริกเกอร์เอง} ถ้า (มี (parent, selector)) {fn.call (obj, เหตุการณ์); กลับ; } parent = parent.parentNode; - คืน Func; }, addEvent: ฟังก์ชั่น (เป้าหมาย, ประเภท, fn) {ถ้า (เป้าหมาย) ส่งคืนเท็จ; var add = function (obj) {ถ้า (obj.addeventListener) {obj.addeventListener (ประเภท, fn, false); } else {// สำหรับ IE 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, อาร์กิวเมนต์); - obj.attachevent ("on" + type, event.iefunclist [obj] [type] [fn]); }} if (target.length> = 0 && target! == window &&! target.tagname) {สำหรับ (var i = 0, l = target.length; i <l; i ++) {เพิ่ม (เป้าหมาย [i])}} อื่น {เพิ่ม (เป้าหมาย); }}, OffEvent: function (target, type, fn) {ถ้า (เป้าหมาย) ส่งคืน false; var ลบ = ฟังก์ชั่น (obj) {ถ้า (obj.addeventListener) {obj.removeeVentListener (ประเภท, fn, false); } else {// สำหรับ IE 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! == window &&! target.tagname) {สำหรับ (var i = 0, l = target.length; i <l; i ++) {ลบ (เป้าหมาย [i])}} อื่น {ลบ (เป้าหมาย); -
รหัส - demo.html
<! doctype html> <html> <head> <meta charset = "utf-8"> <title> ทดสอบ </title> </head> <body> <p> เหตุการณ์ทดสอบ </p> <div id = เนื้อหา> <ul> <li> id = "btn3"> 3 </button> </li> <li> <button id = "btn4"> 4 </button> </li> <li> <button id = "btn5"> 5 </lit> </li> src = "addevent.js"> </script> <script> (ฟังก์ชั่น () {/* สาธิตการสาธิต*/var $ id = ฟังก์ชั่น (id) {return document.getElementById (id) || id;} var outer = $ id ("เนื้อหา"), btn = $ id ("ข้อความ"); Event.on (OUTER, 'UNBING', "คลิก", ลบ); var target = e.srceneement || e.target; }}) (); </script> </body> </html>