วิธีการทั่วไปของการเชื่อมโยงเหตุการณ์: การเชื่อมโยงแบบดั้งเดิม, วิธีการผูก W3C และวิธีการเชื่อมโยงเช่น อย่างไรก็ตามสิ่งที่สำคัญสำหรับเราในการพัฒนาจริงคือการต้องใช้วิธีการผูกมัดแบบข้ามเบราว์เซอร์ทั่วไป หากเราค้นหาบนอินเทอร์เน็ตเราจะพบวิธีการมากมาย นี่คือวิธีการที่รู้จักกันดีอีกสองสามวิธี:
ก่อนที่จะเริ่มภาคการศึกษาเราควรหารือเกี่ยวกับข้อกำหนดที่ดีว่าวิธีการที่ดีของ Addevent () ควรปฏิบัติตาม:
. จัดการเหตุการณ์เดียวกันที่รองรับองค์ประกอบเดียวกันสามารถผูกฟังก์ชั่นการฟังหลายฟังก์ชั่น
ข. หากฟังก์ชั่นเดียวกันนั้นลงทะเบียนหลายครั้งในการจัดการเหตุการณ์เดียวกันขององค์ประกอบเดียวกันการลงทะเบียนทั้งหมดหลังจากการลงทะเบียนครั้งแรกจะถูกละเว้น
ค. สิ่งนี้ในร่างกายฟังก์ชั่นควรชี้ไปที่โหนดที่กำลังประมวลผลเหตุการณ์ (เช่นโหนดที่กำลังใช้งานตัวจัดการเหตุการณ์);
d. ลำดับการดำเนินการของฟังก์ชั่นการฟังควรดำเนินการตามลำดับที่ถูกผูกไว้
ก. อย่าใช้เหตุการณ์ = เหตุการณ์ || window.event; ในฟังก์ชั่นร่างกายเพื่อทำให้วัตถุเหตุการณ์ปกติ;
1. ฟังก์ชั่น AddEvent () ที่เขียนโดย John Resig
ฟังก์ชั่น addevent (obj, type, fn) {ถ้า (obj.attachevent) {obj ['e'+type+fn] = fn; obj [type+fn] = function () {obj ['e'+type+fn] (window.event);} obj.attachevent ('on'+type, obj [type+fn]); } else obj.addeventListener (ประเภท, fn, false); } ฟังก์ชั่น removeEvent (obj, type, fn) {ถ้า (obj.detachevent) {obj.detachevent ('on'+type, obj [type+fn]); obj [type+fn] = null; } else obj.removeeVentListener (ประเภท, fn, false); -เป็นเรื่องน่าประหลาดใจจริงๆที่ฟังก์ชั่นนี้ง่ายและเข้าใจง่าย จากนั้นเรายังต้องดูที่ข้อกำหนดห้าประการด้านบน:
พอใจกับจุดแรก
ฉันต้องพอใจกับคะแนนที่สามและห้า
สำหรับจุดที่สองมันไม่เป็นที่พอใจเพราะ addeventListener () ละเว้นการลงทะเบียนซ้ำในขณะที่ attaineVent () ไม่ได้;
อย่างไรก็ตามจุดที่สี่ไม่เป็นที่พอใจเนื่องจากมาตรฐาน DOM ไม่ได้กำหนดลำดับของฟังก์ชั่นการประมวลผลเวลาเพื่อเรียกวัตถุดังนั้นจึงไม่ควรได้รับการรับรองว่าพวกเขาถูกเรียกในลำดับของการลงทะเบียน
แต่ฟังก์ชั่นนี้ยังคงเป็นฟังก์ชั่นที่ดีมาก
2. ฟังก์ชั่น AddEvent () ที่เขียนโดย Dean Edward
ฟังก์ชั่น addevent (องค์ประกอบ, ประเภท, ตัวจัดการ) {ถ้า (! handler. $$ guid) ตัวจัดการ. $$ guid = addevent.guid ++; if (! element.events) element.events = {}; var handlers = element.events [type]; if (! handlers) {handlers = element.events [type] = {}; if (element ["on" + type]) {handlers [0] = element ["on" + type]; }} Handlers [Handler. $$ GUID] = Handler; องค์ประกอบ ["on" + type] = handlevent;} addevent.guid = 1; ฟังก์ชั่น remverevent (องค์ประกอบ, ประเภท, ตัวจัดการ) {ถ้า (element.events && element.events [type]) {ลบองค์ประกอบ event.events [type] [handler. $$ guid]; }} function handleEvent (เหตุการณ์) {var returnValue = true; เหตุการณ์ = เหตุการณ์ || fixeVent (window.event); var handlers = this.events [event.type]; สำหรับ (var i ในตัวจัดการ) {this. $$ handlevent = handlers [i]; if (this. $$ handleEvent (เหตุการณ์) === false) {returnValue = false; }} returnValue;}; ฟังก์ชั่น fixeVent (เหตุการณ์) {event.preventDefault = fixeVent.preventDefault; Event.stopPropagation = fixeVent.stopPropagation; เหตุการณ์ return;}; fixeVent.preventDefault = function () {this.returnValue = false;}; fixeVent.stopPropagation = function () {this.cancelBubble = true;};ฟังก์ชั่นนี้ใช้ วิธีการผูกมัดแบบดั้งเดิม ดังนั้นจึงทำงานในเบราว์เซอร์ทั้งหมดโดยไม่ทำให้เกิดการรั่วไหลของหน่วยความจำ
แต่สำหรับ 5 คะแนนที่เสนอเดิมฟังก์ชั่นจะตอบสนองเพียงสี่คะแนนแรกเท่านั้น เฉพาะจุดสุดท้ายเท่านั้นที่ไม่พอใจเพราะใน JavaScript ลำดับของการดำเนินการของคำสั่ง/ในคำสั่งไม่ได้ระบุไว้ในลำดับของการมอบหมายแม้ว่าส่วนใหญ่จะดำเนินการในลำดับที่คาดหวังดังนั้นคำสั่งของคำสั่งนี้อาจแตกต่างกันในเวอร์ชันหรือการใช้งาน JavaScript ที่แตกต่างกัน
3. การปรับปรุงฟังก์ชั่น addevent () ของ Dean Edward
array.prototype.indexof = function (obj) {var result = -1, ความยาว = this.length, i = ความยาว - 1; สำหรับ (; i> = 0; i--) {ถ้า (นี่ [i] == obj) {result = i; หยุดพัก; }} return result;} array.prototype.contains = function (obj) {return (this.indexof (obj)> = 0)} array.prototype.append = function (obj, nodup) {ถ้า (! (nodup && this.contains (obj)) }} array.prototype.remove = ฟังก์ชั่น (obj) {var index = this.indexof (obj); if (! index) return; ส่งคืนสิ่งนี้ splice (ดัชนี, 1);}; ฟังก์ชั่น addevent (องค์ประกอบ, ประเภท, ความสนุก) {ถ้า (! element.events) element.events = {}; var handlers = element.events [type]; if (! handlers) {handlers = element.events [type] = []; if (element ['on' + type]) {handlers [0] = element ['on' + type]; }} handlers.append (ความสนุก, true) องค์ประกอบ ['on' + type] = handlevent;} ฟังก์ชั่นลบ (องค์ประกอบ, ประเภท, สนุก) {ถ้า (element.events && element.events [type]) {element.events [type] .remove (fun); }} ฟังก์ชั่น handleEvent (เหตุการณ์) {var returnValue = true, i = 0; เหตุการณ์ = เหตุการณ์ || fixeVent (window.event); var handlers = this.events [event.type], length = handlers.length; สำหรับ (; i <length; i ++) {if (handlers [i]. call (เหตุการณ์นี้) === false) {returnValue = false; }} returnValue;} ฟังก์ชั่น fixeVent (เหตุการณ์) {event.preventDefault = fixeVent.PreventDefault; Event.stopPropagation = fixeVent.stopPropagation; return event;} fixeVent.preventDefault = function () {this.returnValue = false;}; fixeVent.stopPropagation = function () {this.cancelBubble = true;};ฟังก์ชั่นนี้คือการปรับปรุงฟังก์ชั่น addevent () ของ Dean Edward ซึ่งตรงตามข้อกำหนดเบื้องต้น 5 ข้อ ฉันหวังว่ามันจะเป็นประโยชน์กับการเรียนรู้ของทุกคน ขอบคุณสำหรับการอ่าน