مثل JavaScript

دليل JavaScript

دليل JS DOM

مثلث تاريخ جافا سكريبت مثلث عنصر HTML DOM

طريقة addEventListener() الخاصة بـ HTML DOM

مثلث عنصر HTML DOM

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

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

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

النحو:

element.addEventListener(event, listener, useCapture)

مثال

var x = document.querySelector("button");
x.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 تستجيب للحدث. يمكن أن تكون الدالة هي أي دالة JavaScript. عندما يحدث الحدث، يتم نقل كائن الحدث كأول معامل يتم تقديمه إلى الدالة. نوع كائن الحدث يعتمد على الحدث المحدد. على سبيل المثال، حدث "click" ينتمي إلى كائن MouseEvent.
useCapture	（اختياري）قيمة بولية، تحدد ما إذا كان التنفيذ يتم في مرحلة التقاطع أم مرحلة البواءب. القيمة الافتراضية هي false. القيم الممكنة: true-يتم تنفيذ معالج الأحداث في مرحلة التقاطع false-يتم تنفيذ معالج الأحداث في مرحلة البواءب يمكنك العثور علىدليل تعلم JavaScript حول انتقال الأحداثللإطلاع على معلومات إضافية حول انتقال الأحداث، يرجى قراءة:

تفاصيل تقنية

القيمة الم返回ة:	لا يوجد
إصدار DOM:	DOM 2级

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

هذا المثال يشارك إلى دالة "مرمزة" خارجية:

مثال

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

اختبار لرؤية‹/›

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

مثال

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

اختبار لرؤية‹/›

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

مثال

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

اختبار لرؤية‹/›

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

مثال

var　btn　=　document.querySelector("button");
btn.addEventListener("click",　function()　{
myFunc(x,　y);
});

اختبار لرؤية‹/›

مراجع ذات صلة

دليل جافا سكريبت:مراقب الأحداث

دليل جافا سكريبت:انتشار الأحداث

مرجع HTML DOM:العنصر.removeEventListener()

مرجع HTML DOM:document.addEventListener()

مثلث عنصر HTML DOM

مثلث تاريخ جافا سكريبت مثلث عنصر HTML DOM