الطرق الشائعة لربط الأحداث: الربط التقليدي ، طريقة الربط W3C ، وطريقة الربط IE . ومع ذلك ، فإن ما هو مهم بالنسبة لنا في التطور الفعلي هو طلب طريقة ربط عامة للمتصفح. إذا بحثنا على الإنترنت ، فسنجد العديد من الطرق. فيما يلي بعض الطرق المعروفة:
قبل بدء الفصل الدراسي ، يجب أن نناقش المتطلبات التي يجب أن تلبيها طريقة AddEvent () جيدة:
أ. يمكن لمقبض الحدث نفسه الذي يدعم نفس العنصر ربط وظائف الاستماع المتعددة ؛
ب. إذا تم تسجيل الوظيفة نفسها عدة مرات على مقبض الحدث نفسه للعنصر نفسه ، فسيتم تجاهل جميع التسجيلات بعد التسجيل الأول ؛
ج. يجب أن يشير هذا في جسم الوظيفة إلى العقدة التي تقوم بمعالجة الحدث (مثل العقدة التي تعمل حاليًا على معالج الأحداث) ؛
د. يجب تنفيذ ترتيب تنفيذ وظيفة الاستماع بالترتيب المرتبط ؛
ه. لا تستخدم الحدث = الحدث || window.event ؛ في جسم الوظيفة لتطبيع كائن الحدث ؛
1. وظيفة addevent () كتبها جون ريج
وظيفة addEvent (obj ، type ، fn) {if (obj.attachevent) {obj ['e'+type+fn] = fn ؛ obj [type+fn] = function () {obj ['e'+type+fn] (window.event) ؛} obj.attachevent ('on'+type ، obj [type+fn]) ؛ } آخر obj.addeventListener (النوع ، fn ، false) ؛ } وظيفة إزالة (obj ، type ، fn) {if (obj.detachevent) {obj.detachevent ('on'+type ، obj [type+fn]) ؛ OBJ [type+fn] = null ؛ } آخر obj.removeeventListener (النوع ، fn ، false) ؛ }من المدهش حقًا أن هذه الوظيفة بسيطة للغاية وسهلة الفهم. ثم ما زلنا بحاجة إلى إلقاء نظرة على المتطلبات الخمسة المذكورة أعلاه:
راضٍ عن النقطة الأولى ؛
لا بد لي من الرضا عن النقطتين الثالثة والخامسة ؛
بالنسبة للنقطة الثانية ، فهي غير راضية لأن AddEventListener () يتجاهل التسجيل المكررة ، في حين أن ActaChevent () لا ؛
ومع ذلك ، فإن النقطة الرابعة غير راضية ، لأن معيار DOM لا يحدد ترتيب وظائف المعالجة الزمنية لاستدعاء كائن ما ، لذلك لا ينبغي أن يعتبر أمرا مفروغا منه أن يتم استدعاؤها بترتيب التسجيل.
ولكن هذه الوظيفة لا تزال وظيفة جيدة جدا.
2. وظيفة addevent () كتبها دين إدوارد
وظيفة addEvent (العنصر ، النوع ، المعالج) {if (! handler. $$ guid) معالج. $$ guid = addevent.guid ++ ؛ if (! element.events) element.events = {} ؛ var handlers = element.events [type] ؛ if (! معالجات) {معالجات = element.events [type] = {} ؛ if (element ["on" + type]) {handlers [0] = element ["on" + type] ؛ }} معالجات [معالج. $$ guid] = معالج ؛ element ["on" + type] = handlevent ؛} addEvent.Guid = 1 ؛ وظيفة إزالة (عنصر ، نوع ، معالج) {if (element.events && element.events [type]) {delete element.events [type] [handler. $$ guid] ؛ }} وظيفة مقبض (حدث) {var returnValue = true ؛ الحدث = الحدث || FixEvent (window.event) ؛ var handlers = this.events [event.type] ؛ لـ (var i in Handlers) {this. $$ handlevent = handlers [i] ؛ if (this. $$ handlevent (event) === false) {returnValue = false ؛ }} returnvalue ؛} ؛ دالة fixEvent (event) {event.preventDefault = fixEvent.preventDefault ؛ event.stopPropagation = fixevent.stoppropagation ؛ return event ؛} ؛ fixEvent.preventDefault = function () {this.redurnvalue = false ؛} ؛ fixEvent.StopPropagation = function () {this.cancelBubble = true ؛} ؛تستخدم هذه الوظيفة طرق الربط التقليدية ، لذلك تعمل في جميع المتصفحات دون التسبب في تسرب الذاكرة.
ولكن بالنسبة للنقاط الخمس المقترحة في الأصل ، فإن الوظيفة ترضي النقاط الأربع الأولى فقط. فقط النقطة الأخيرة غير راضية ، لأنه في JavaScript ، لم يتم تحديد ترتيب تنفيذ/في البيانات بترتيب المهمة ، على الرغم من أن معظم الوقت يتم تنفيذها بالترتيب المتوقع ، وبالتالي قد يكون ترتيب هذا البيان مختلفًا في إصدارات أو تطبيقات JavaScript المختلفة.
3. تحسين وظيفة Dean Edward's Addevent ()
Array.Prototype.indexof = function (obj) {var result = -1 ، length = this.length ، i = length - 1 ؛ لـ (؛ i> = 0 ؛ i--) {if (this [i] == obj) {result = i ؛ استراحة؛ }} return return ؛} array.prototype.contains = function (obj) {return (this.indexof (obj)> = 0)} array.prototype.append = function (obj ، nodup) {if (! }} array.prototype.remove = function (obj) {var index = this.indexof (obj) ؛ إذا (! فهرس) العودة ؛ return this.splice (index ، 1) ؛} ؛ function addEvent (element ، type ، fun) {if (! element.events) element.events = {} ؛ var handlers = element.events [type] ؛ if (! معالجات) {معالجات = element.events [type] = [] ؛ if (element ['on' + type]) {handlers [0] = element ['on' + type] ؛ }} معالجات. }} function GealthEvent (event) {var returnValue = true ، i = 0 ؛ الحدث = الحدث || FixEvent (window.event) ؛ var handlers = this.events [event.type] ، length = handlers.length ؛ لـ (؛ i <length ؛ i ++) {if (معالجات [i] .call (هذا ، الحدث) === false) {returnValue = false ؛ }} return returnvalue ؛} fixevent (event) {event.preventDefault = fixEvent.preventDefault ؛ event.stopPropagation = fixevent.stoppropagation ؛ return event ؛} fixevent.preventDefault = function () {this.returnvalue = false ؛} ؛ fixevent.stopPropagation = function () {this.cancelBubble = true ؛} ؛هذه الوظيفة هي تحسن وظيفة Dean Edward's Addevent () ، والتي تلبي بالكامل المتطلبات الأولية الخمسة. آمل أن يكون ذلك مفيدًا لتعلم الجميع. شكرا لك على قراءتك.