طريقة addEventListener() في Document HTML DOM
- الصفحة السابقة activeElement
- الصفحة التالية adoptNode()
- العودة إلى الطبقة العليا مستندات 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 مدرجة في: |
function |
مطلوب. الدالة التي تتم تنفيذها عند حدوث الحدث. عند حدوث الحدث، يتم نقل موضوع الحدث كأول معامل للوظيفة. نوع موضوع الحدث يعتمد على الحدث المحدد. على سبيل المثال، يتبع حدث "click" موضوع MouseEvent. |
capture |
اختياري (القيمة الافتراضية = 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 | دعم | دعم | دعم | دعم |
الصفحات ذات الصلة
طرق العنصر
طرق المستند
دليل
- الصفحة السابقة activeElement
- الصفحة التالية adoptNode()
- العودة إلى الطبقة العليا مستندات HTML DOM