طريقة addEventListener() لموضوع DOM HTML

التعريف والاستخدام

addEventListener() الطريقة تضيف معالج الحدث إلى العنصر.

مثال

مثال 1

إضافة حدث click إلى عنصر <button>:

element.addEventListener("click", myFunction);
function myFunction() {
  document.getElementById("demo").innerHTML = "Hello World";
}

جرب بنفسك

مثال 2

الكود الأكثر تقليلًا:

element.addEventListener("click", function() {
  document.getElementById("demo").innerHTML = "Hello World";
});

جرب بنفسك

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

النص

element.addEventListener(type, function, useCapture)

المعلمات

المعلمات الوصف
type

مطلوب. اسم الحدث.

لا تستخدم بدلاً من ذلك "on".

استخدم "click" بدلاً من "onclick".


قائمة كاملة بالأحداث DOM
function مطلوب. الدالة التي يتم تشغيلها عند حدوث الحدث.
useCapture

اختياري (القيمة الافتراضية = false).

  • false - يتم تنفيذ المعالج في مرحلة التدفق.
  • true - يتم تنفيذ المعالج في مرحلة الاستقبال.

القيمة المعدة

لا يوجد.

تفاصيل تقنية

هذه الطريقة تضيف وظيفة مستمع الحدث المحددة إلى مجموعة المستمعين الحالية للعقدة الحالية، لتعالجة النوع المحدد من الأحداث. type للحدث. useCapture إذا كانت قيمتها true، فإن المستمع يتم تسجيله كمعالج أحداث ملاحظة. useCapture إذا كانت قيمتها false، فإنها يتم تسجيلها كمعالج أحداث عادي.

addEventListener() قد يتم استدعاؤها عدة مرات، لتسجيل عدة معالجات أحداث لنفس النوع في نفس العقدة. ولكن يجب الانتباه إلى أن DOM لا يمكنه تحديد ترتيب استدعاء معالجات الأحداث المتعددة.

إذا تم تسجيل وظيفة مستمع الحدث نفسها في نفس العقدة باستخدام type و useCapture إذا تم تسجيل المعامل كمرتين، فإن التسجيل الثاني سيتم تجاهله. إذا كنت تعمل على معالجة أحداث عقدة، فإن تسجيل مستمع جديد للحدث في نفس العقدة لن يؤدي إلى استدعاء مستمع الحدث الجديد.

عند استخدام Node.cloneNode() الطريقة أو Document.importNode() عند نسخ عقدة Document لن يتم نسخ مستمعي الأحداث المسجلين في العقدة الأصلية.

هذه الطريقة موجودة أيضًا Document و Window تم تعريفها على العنصر، وتعمل بنفس الطريقة.

مزيد من الأمثلة

مثال 3

يمكنك إضافة العديد من الأحداث إلى العنصر نفسه:

element.addEventListener("click", myFunction1);
element.addEventListener("click", myFunction2);

جرب بنفسك

مثال 4

يمكنك إضافة أحداث مختلفة إلى العنصر نفسه:

element.addEventListener("mouseover", myFunction);
element.addEventListener("click", someOtherFunction);
element.addEventListener("mouseout", someOtherFunction);

جرب بنفسك

مثال 5

للتحويل قيم المعاملات، استخدم "دالة مجهولة المصدر":

element.addEventListener("click", function() {
  myFunction(p1, p2);
});

جرب بنفسك

مثال 6

تغيير لون الخلفية لـ <button> عناصر:

element.addEventListener("click", function() {
  this.style.backgroundColor = "red";
});

جرب بنفسك

مثال 7

الفرق بين التبني والانتباه:

element1.addEventListener("click", myFunction, false); element2.addEventListener("click", myFunction, true);

جرب بنفسك

مثال 8

حذف معالج الحدث:

element.addEventListener("mousemove", myFunction);
element.removeEventListener("mousemove", myFunction);

جرب بنفسك

دعم المتصفحات

element.addEventListener() هي وظيفة DOM Level 2 (2001).

يدعم جميع المتصفحات بشكل كامل:

Chrome IE Edge Firefox Safari Opera
Chrome IE Edge Firefox Safari Opera
الدعم 9-11 الدعم الدعم الدعم الدعم

الصفحات ذات الصلة

طرق العنصر:

طريقة addEventListener()

طريقة removeEventListener()

طرق الوثيقة:

طريقة addEventListener()

طريقة removeEventListener()

دليل:

HTML DOM EventListener

قائمة كاملة بالأحداث DOM