พื้นหลัง
มีปัญหาเล็กน้อยหลายประการเมื่อมีการเชื่อมโยงเหตุการณ์โดยใช้ addeventListener () หรือ attightEvent () ใน JavaScript:
1. ฟังก์ชั่นที่ไม่ระบุชื่อที่เพิ่มเข้ามาโดยใช้ AddEventListener () หรือ attainEvent () ไม่สามารถลบออกได้
การคัดลอกรหัสมีดังนี้: var obtn = document.getElementById ('btn');
obtn.addeventListener ('คลิก', function () {
การแจ้งเตือน ('คลิกปุ่ม')
},เท็จ)
obtn.reomveeVentListener ('คลิก', function () {
การแจ้งเตือน ('คลิกปุ่ม')
},เท็จ)
// เหตุการณ์บน OBTN ไม่สามารถลบได้เนื่องจากฟังก์ชั่นที่ไม่ระบุชื่อถูกส่งผ่านเข้ามา
2. ใน IE6-IE8 ปัญหาการดำเนินการตามลำดับย้อนกลับของหลาย ๆ เหตุการณ์ถูก จำกัด โดยใช้ attightEvent ()
การคัดลอกรหัสมีดังนี้:
var obtn = document.getElementById ('btn');
obtn.attachevent ('onclick', function () {
การแจ้งเตือน (1)
-
obtn.attachevent ('onclick', function () {
การแจ้งเตือน (2)
-
obtn.attachevent ('onclick', function () {
การแจ้งเตือน (3)
-
// eie9+ คำสั่งดำเนินการ 1, 2, 3
// คำสั่งดำเนินการภายใต้ IE6-IE8 3, 2, 1
แก้ปัญหา
ฉันต้องการเขียนโมดูลการเชื่อมโยงเหตุการณ์ข้ามเบราว์เซอร์เพื่อให้สามารถนำกลับมาใช้ใหม่ได้ในภายหลังและในเวลาเดียวกันฉันต้องการแก้ไขปัญหาการอุทธรณ์ JQuery ใช้คิวเหตุการณ์และกลไกการแคชข้อมูลเพื่อแก้ปัญหานี้ ฉันดูซอร์สโค้ดที่เกี่ยวข้อง มันซับซ้อนจริงๆ ฉันลองวิธีการบางอย่างด้วยตัวเองและใช้งานได้แทบจะไม่ รหัสถูกโพสต์ในวัตถุที่มุ่งเน้นและฉันไม่ต้องการให้คนเห็นมันซับซ้อนดังนั้นฉันจึงเปลี่ยนเป็นฟังก์ชั่นเพื่อจัดระเบียบ
การคัดลอกรหัสมีดังนี้:
/*อินเตอร์เฟสเหตุการณ์ที่มีผลผูกพัน
-
*@param {dom-dom} และ {type-string} และ {fn-function} พารามิเตอร์ตัวเลือก {fnname-string}
*@Execute สร้างคิวเหตุการณ์และเพิ่มลงในคุณสมบัติวัตถุ DOM
เพิ่มตัวจัดการเหตุการณ์ (ฟังก์ชั่น) ไปยังคิวกิจกรรม
ตัวระบุสามารถเพิ่มลงในตัวจัดการเหตุการณ์เพื่อลบตัวจัดการเหตุการณ์ที่ระบุ
-
ฟังก์ชั่น bind (dom, type, fn, fnname) {
dom.eventqueue = dom.eventqueue || -
dom.eventqueue [type] = dom.eventqueue [type] || -
dom.handler = dom.handler || -
ถ้า (! fnname) {
ดัชนี var = queuelength (dom, type);
dom.eventqueue [type] ['fnqueue'+index] = fn;
-
อื่น {
dom.eventqueue [type] [fnname] = fn;
-
if (! dom.handler [type]) bindevent (dom, type);
-
/*เหตุการณ์ที่มีผลผูกพัน
-
*@param {dom-dom} และ {type-string}
*@Execute Events จะถูกผูกไว้เพียงครั้งเดียว Handler จะใช้ในการสำรวจตัวจัดการเหตุการณ์ (ฟังก์ชั่น) ในคิวเหตุการณ์การดำเนินการ
*@caller bind ()
-
ฟังก์ชั่น bindevent (dom, type) {
dom.handler [type] = function () {
สำหรับ (var guid ใน dom.eventqueue [type]) {
dom.eventqueue [type] [guid]. call (dom);
-
-
if (window.addeventListener) {
dom.addeventListener (ประเภท, dom.handler [type], false);
-
อื่น {
dom.attachevent ('on'+type, dom.handler [type]);
-
-
/*ลบอินเทอร์เฟซสำหรับเหตุการณ์
-
*@param {dom-dom} และ {type-string} พารามิเตอร์ตัวเลือก {fnname-function}
*@Execute หากไม่มีตัวระบุให้ดำเนินการ Unbindevent ()
หากมีตัวระบุตัวจัดการเหตุการณ์ที่ระบุจะถูกลบ หากความยาวคิวของเหตุการณ์คือ 0, unbindevent () จะถูกดำเนินการ
-
ฟังก์ชั่น unbind (dom, type, fnname) {
var hasqueue = dom.eventqueue && dom.eventqueue [type];
ถ้า (! hasqueue) กลับมา;
ถ้า (! fnname) {
Unpindevent (dom, type)
-
อื่น {
ลบ dom.eventqueue [type] [fnname];
if (queuelength (dom, type) == 0) Unbindevent (dom, type);
-
-
/*ลบเหตุการณ์
-
*@param {dom-dom} และ {type-string}
*@execute ลบตัวจัดการเหตุการณ์ที่ถูกผูกไว้และล้างคิวเหตุการณ์
*@caller unbind ()
-
ฟังก์ชั่น Unbindevent (dom, type) {
if (window.removeEventListener) {
dom.removeeVentListener (ประเภท, dom.handler [type])
-
อื่น {
dom.detachevent (type, dom.handler [type])
-
ลบ dom.eventqueue [type];
-
/*ความยาวคิวของเหตุการณ์ผู้พิพากษา
-
*@param {dom-dom} และ {type-string}
*@caller bind () unbind ()
-
ฟังก์ชั่น queuelength (dom, type) {
ดัชนี var = 0;
สำหรับ (ความยาว var ใน dom.eventqueue [type]) {
ดัชนี ++;
-
ดัชนีคืน;
-
วิธีใช้
การคัดลอกรหัสมีดังนี้:
var obtn = document.getElementById ('btn');
// เหตุการณ์ที่มีผลผูกพัน
// ผูกฟังก์ชันเหตุการณ์สามคลิกในเวลาเดียวกันสำหรับปุ่ม
// คำสั่งดำเนินการภายใต้ IE6-IE8 ยังคงไม่เปลี่ยนแปลง
ผูก (obtn, 'คลิก', function () {
การแจ้งเตือน (1);
-
ผูก (obtn, 'คลิก', function () {
การแจ้งเตือน (2);
}, 'myfn')
ผูก (obtn, 'คลิก', function () {
การแจ้งเตือน (3);
-
// ลบเหตุการณ์
// ลบฟังก์ชั่นเหตุการณ์การคลิกที่ถูกผูกไว้ทั้งหมดสนับสนุนการกำจัดฟังก์ชั่นที่ไม่ระบุชื่อ
unbind (obtn, 'คลิก')
// ลบฟังก์ชันเหตุการณ์เท่านั้นด้วยตัวระบุ myfn
unbind (obtn, 'คลิก', 'myfn')
ไอเดียโปรแกรม
แนวคิดหลักของโปรแกรมคือการเพิ่มคิวเหตุการณ์เป็นคุณลักษณะของวัตถุองค์ประกอบ DOM ให้กับองค์ประกอบ DOM โดยไม่ทำให้เกิดมลพิษต่อสภาพแวดล้อมทั่วโลก สิ่งนี้สามารถแก้ปัญหาการจัดเก็บข้อมูลของฟังก์ชั่นเหตุการณ์หลายอย่างขององค์ประกอบ DOM ที่แตกต่างกันซึ่งเชื่อมโยงกับประเภทเหตุการณ์ที่แตกต่างกัน
การคัดลอกรหัสมีดังนี้:
// คิวเหตุการณ์บนองค์ประกอบ DOM
Dom {
Eventqueue: {
'คลิก': {
fnqueue1: ฟังก์ชั่น,
myfn: ฟังก์ชั่น
fnqueue3: ฟังก์ชั่น
-
'Mouseover': {
fnqueue1: ฟังก์ชั่น,
fnqueue2: ฟังก์ชั่น
-
-
-
ในแต่ละครั้งฟังก์ชันเหตุการณ์จะถูกเพิ่มลงในคิวเหตุการณ์ของประเภทเหตุการณ์ที่เกี่ยวข้องและเหตุการณ์จะถูกผูกไว้เพียงครั้งเดียวเท่านั้น เมื่อมีการเรียกเหตุการณ์ฟังก์ชันเหตุการณ์ตัวจัดการจะถูกดำเนินการและตัวจัดการจะข้ามฟังก์ชันเหตุการณ์ในคิวเหตุการณ์การดำเนินการ
unbind () ลบฟังก์ชั่นเหตุการณ์ที่ถูกผูกไว้ทั้งหมดหากไม่มีตัวระบุขาเข้ารองรับการลบฟังก์ชั่นที่ไม่ระบุชื่อและลบฟังก์ชั่นเหตุการณ์ที่ระบุหากมีตัวระบุ
ตรรกะของโปรแกรมไม่ซับซ้อนและอาจมีข้อบกพร่องและปัญหาประสิทธิภาพ หากคุณสนใจคุณสามารถแนะนำและสื่อสาร