طريقة addEventListener() في Document HTML DOM

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

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

مثال

مثال 1

إضافة أحداث الـ click إلى الوثيقة：

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

تجربة بنفسك

النحو الأبسط:

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

تجربة بنفسك

مثال 2

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

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

تجربة بنفسك

مثال 3

يمكنك إضافة أنواع مختلفة من الأحداث:

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

تجربة بنفسك

مثال 4

استخدم "anonymous function" للدعوة إلى الدالة المزودة بالمعلمات عند نقل المعلمات:

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

تجربة بنفسك

مثال 5

تغيير لون خلفية المستند:

document.addEventListener("click", function(){
  document.body.style.backgroundColor = "red";
});

تجربة بنفسك

مثال 6

استخدم طريقة removeEventListener():

// إضافة مستمع الحدث
document.addEventListener("mousemove", myFunction);
// إزالة مستمع الحدث
document.removeEventListener("mousemove", myFunction);

تجربة بنفسك

النحو

document.addEventListener(النوع, function, capture)

الم参数

الم参数 الوصف
النوع

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

لا تستخدم نافذة "on".

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

جميع أحداث HTML DOM مدرجة في:

دليل مرجع الأحداث DOM HTML
function

مطلوب. الدالة التي تتم تنفيذها عند حدوث الحدث.

عند حدوث الحدث، يتم نقل موضوع الحدث كأول معامل للوظيفة.

نوع موضوع الحدث يعتمد على الحدث المحدد. على سبيل المثال، يتبع حدث "click" موضوع MouseEvent.
capture

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

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

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

لا يوجد.

تفاصيل تقنية

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

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

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

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

يحدد هذا الطريقة أيضًا في كلا من عناصر Document و Window، ويعمل بشكل مشابه.

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

document.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

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