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

document.addEventListener()يتم ربط معالج الحدث إلى المستند.

استخدامdocument.removeEventListener()يتم حذف البرنامج النصي لمعالجة الحدث الذي تم ربطه مع طريقة addEventListener().

استخدامالشخص .addEventListener()يضيف معالج الحدث إلى العنصر المحدد.

النحو:

document.addEventListener(event, listener, useCapture)

مثال

document.addEventListener("click",　function()　{
alert("Hello World!!!");
});

الرقم في الجدول يشير إلى إصدار المتصفح الذي يدعم طريقة addEventListener() بشكل كامل:

الطريقة
addEventListener()	1	1	7	1.0	9

المعامل	وصف
event	مطلوب) يمكن أن يكون حدثًا صالحًا جدًا في JavaScript. عند استخدام الحدث، لا تستخدم بادئة "on"، مثل استخدام "click" بدلاً من "onclick"، "mousedown" بدلاً من "onmousedown". للحصول على قائمة كاملة بجميع أحداث HTML DOM، يرجى الرجوع إلىمرجع HTML DOM لحدث.
listener	مطلوب) يمكن أن يكون دالة JavaScript تتفاعل مع حدث. عندما يحدث الحدث، يتم نقل كائن الحدث كمعامل أولي إلى الدالة. نوع كائن الحدث يعتمد على الحدث المحدد. على سبيل المثال، يتبع حدث النقر كائن MouseEvent.
useCapture	بإمكانها أن تكون قيمة بولية، تحدد ما إذا كان يجب تنفيذ الأحداث في مرحلة الاستقبال أو التدفق. القيمة الافتراضية هي false. القيم الممكنة: true-يتم تنفيذ معالج الأحداث في مرحلة الاستقبال false-يتم تنفيذ معالج الأحداث في مرحلة التدفق يمكنك فيدليل تعليمات JavaScript حول نشر الأحداثاقرأ المزيد عن نشر الأحداث

القيمة العائدة:	لا يوجد
إصدار DOM:	مستوى DOM 2

أضف واقعة النقر إلى المستند. عند نقر المستخدم إلى أي مكان في المستند، استخدم عنصر <p> باستخدام id="para" لإظهار "Hello World":

مثال

document.addEventListener("click",　function()　{
document.querySelector("#para").innerHTML = "Hello World!!!";
});

في هذا المثال، يتم استدعاء دالة "المسمى" الخارجية:

مثال

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

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

مثال

document.addEventListener("click", myFunc);
document.addEventListener("click", anotherFunc);

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

مثال

document.addEventListener("mouseenter",　myFunc1);
document.addEventListener("click",　myFunc2);
document.addEventListener("mouseout",　myFunc3);

عند تقديم قيم المعلمات، استخدم دالة مجهولة الاسم، حيث تستدعي الدالة المحددة المعلمة

مثال

document.addEventListener("click",　function()　{
myFunc(x,　y);
});

تعليمية JavaScript:مستمع الأحداث