JavaScript - وظائف السهم ومعالجات الأحداث

عند استخدام وظائف السهم كرد اتصال لمعالجات الأحداث، تكون قيمة هذا داخل الوظيفة غير متوقعة. يشرح منشور المدونة هذا السبب وراء هذا السلوك ويوفر حلاً للوصول إلى العنصر المقصود باستخدام events.currentTarget.

وظائف السهم والنطاق المعجمي

على عكس الوظائف العادية، لا تحتوي وظائف السهم على وظائفها الخاصة. السياق الخاص أو نطاق لهذا. وبدلا من ذلك، فإنهم يرثون النطاق المعجمي للسياق المحيط بهم. في المثال المقدم، تم تعريف وظيفة السهم ضمن معالج حدث النقر الخاص بـ dom.videoLinks. لذلك، يشير هذا ضمن وظيفة السهم إلى عنصر dom.videoLinks.

مستمعي الأحداث وevent.currentTarget

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

تشير الخاصية events.target إلى العنصر الذي أطلق الحدث مباشرة. أثار الحدث. في معظم الحالات، هذا هو العنصر الذي تم النقر عليه أو تمرير مؤشر الماوس فوقه أو التركيز عليه.

من ناحية أخرى، تشير الخاصية events.currentTarget إلى العنصر الذي تم إرفاق مستمع الحدث به. هذا هو العنصر الذي تتم معالجة الحدث عليه في وقت التنفيذ.

استخدام events.currentTarget في Arrow Functions

للوصول إلى العنصر المقصود داخل معالج حدث دالة السهم، استخدم الحدث .currentTarget بدلا من هذا. إليك نسخة معدلة من الكود:

dom.videoLinks.click((e) => {
  e.preventDefault();
  console.log($(e.currentTarget));
  var self = $(e.currentTarget),
      url = self.attr(configuration.attribute);

  eventHandlers.showVideo(url);

  // Deactivate any active video thumbs
  dom.videoLinks.filter('.video-selected').removeClass('video-selected');

  // Activate selected video thumb
  self.addClass('video-selected');
});

.currentTarget vs .target

بشكل عام، يجب استخدام events.currentTarget بدلاً من events.target عند العمل مع معالجات الأحداث. وذلك لأن الأحداث يمكن أن تتصاعد أو تلتقط شجرة DOM، واستخدام events.target قد لا يشير دائمًا إلى العنصر الذي تنوي استهدافه.

يشير events.currentTarget باستمرار إلى العنصر الذي يحتوي على مستمع الحدث المرفقة به، بغض النظر عن تدفق الحدث.

الاستنتاج

عند استخدام وظائف الأسهم في معالجات الأحداث، تذكر استخدام events.currentTarget للوصول إلى العنصر المقصود. ضع في اعتبارك التمييز بين events.target وevent.currentTarget عند العمل مع فقاعات الأحداث والتقاطها لضمان التعامل الدقيق مع الأحداث.