مشكلة إزالة EventListener في JavaScript: لماذا يفشل RemoveEventListener()

في JavaScript، يمكّن مستمعو الأحداث المطورين من مراقبة أحداث عناصر DOM مثل النقرات وحركات الماوس وغير ذلك الكثير أكثر. على الرغم من أن إرفاق مستمع الحدث أمر بسيط إلى حد ما، إلا أن إزالته يمكن أن تشكل تحديات في بعض الأحيان.

الكود

يضيف الكود الأصلي مستمع الحدث إلى عنصر يسمى المنطقة عند النقر عليه.

area.addEventListener('click', function(event) {
  app.addSpot(event.clientX, event.clientY);
  app.addFlag = 1;
}, true);

المشكلة

تنشأ المشكلة عند محاولة إزالة مستمع الحدث لاحقًا في الكود.

area.removeEventListener('click', function(event) {
  app.addSpot(event.clientX, event.clientY);
  app.addFlag = 1;
}, true);

ومع ذلك، يظل مستمع الحدث متصلاً، مما يمنع إزالته.

الحل

يكمن سبب هذه المشكلة في كيفية إرفاق مستمعي الحدث. يقوم كل مثيل دالة مختلف بإنشاء مستمع حدث منفصل. في هذه الحالة، يتم استخدام وظيفتين مجهولتين لإضافة المستمع وإزالته.

لحل المشكلة، تأكد من أن مرجع الوظيفة المستخدم للإزالة مطابق للمرجع المستخدم لإضافة المستمع.

function handleClickListener(event) {
  app.addSpot(event.clientX, event.clientY);
  app.addFlag = 1;
}

// Add event listener
area.addEventListener('click', handleClickListener, true);

// Remove event listener
area.removeEventListener('click', handleClickListener, true);

باستخدام نفس مرجع الوظيفة لكلتا العمليتين، يمكن لـ JavaScript إزالة مستمع الحدث بشكل صحيح عند استدعائه.