كيفية إضافة مستمع حدث إلى عناصر متعددة في JavaScript

لنفترض أنك تريد إضافة مستمع حدث إلى عناصر متعددة في JavaScript. كيف يمكنك فعل ذلك؟

في JavaScript تقوم بإضافة ملفمستمع الحدثلعنصر واحد باستخدام بناء الجملة هذا:

document.querySelector('.my-element').addEventListener('click', event => {
  //handle click
})

ولكن كيف يمكنك إرفاق نفس الحدث بعناصر متعددة؟

بمعنى آخر ، كيف تتصلaddEventListener()على عناصر متعددة في نفس الوقت؟

يمكنك القيام بذلك بطريقتين. واحد يستخدم ملفعقدة، والآخر يستخدمحدث محتدما.

باستخدام الحلقة

الحلقة هي الأبسط من الناحية المفاهيمية.

تستطيع الاتصالquerySelectorAll()على جميع العناصر بفئة معينة ، ثم استخدمforEach()للتكرار عليها:

document.querySelectorAll('.some-class').forEach(item => {
  item.addEventListener('click', event => {
    //handle click
  })
})

إذا لم يكن لديك فئة مشتركة لعناصرك ، يمكنك إنشاء مصفوفة بسرعة:

[document.querySelector('.a-class'), document.querySelector('.another-class')].forEach(item => {
  item.addEventListener('click', event => {
    //handle click
  })
})

استخدام فقاعات الحدث

خيار آخر هو الاعتماد علىحدث محتدماوإرفاق مستمع الحدث علىbodyجزء.

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

const element1 = document.querySelector('.a-class')
const element2 = document.querySelector('.another-class')

body.addEventListener(‘click’, event => { if (event.target !== element1 && event.target !== element2) { return } //handle click }


المزيد من دروس js: