مثال
إرفاق الحدث انقر للوثيقة. عندما ينقر المستخدم أي مكان في المستند، خرج "Hello World" في <p> عنصر مع معرف = "تجريبي":
document.addEventListener("click", function(){
document.getElementById("demo").innerHTML = "Hello World";
}); انها محاولة لنفسك » أكثر "Try it Yourself" الأمثلة أدناه.
تعريف والاستخدام
و document. addEventListener() document. addEventListener() طريقة تعلق معالج حدث للوثيقة.
نصيحة: استخدم وثيقة. removeEventListener() طريقة لإزالة معالج الحدث الذي تم إرفاقه مع addEventListener() الأسلوب.
نصيحة: استخدم عنصر. addEventListener() طريقة لإرفاق معالج الحدث لعنصر محدد.
دعم المتصفح
الأرقام في الجدول تحدد أول نسخة متصفح يدعم بشكل كامل الأسلوب.
| طريقة | |||||
|---|---|---|---|---|---|
| addEventListener() | 1.0 | تسعة | 1.0 | 1.0 | 7.0 |
ملاحظة: addEventListener() لا يتم اعتماد طريقة في Internet Explorer 8 والإصدارات السابقة، وأوبرا 6.0 والإصدارات السابقة. ومع ذلك، لهذه الإصدارات المحددة المتصفح، يمكنك استخدام attachEvent() طريقة لتوصيل معالجات الأحداث (see "More Examples" below for a cross-browser solution) .
بناء الجملة
document.addEventListener( event , function ,
useCapture )
قيم معلمة
| معامل | وصف |
|---|---|
| event | مطلوب. A سلسلة تحدد اسم الحدث. ملاحظة: لا تستخدم "on" البادئة. على سبيل المثال، استخدم "click" بدلا من "onclick" . للحصول على قائمة من كافة الأحداث HTML DOM، أن ننظر في موقعنا كاملة HTML DOM الحدث كائن المرجعي . |
| function | مطلوب. يحدد وظيفة لتشغيل عند وقوع الحدث. عند حدوث الحدث، يتم تمرير كائن الحدث إلى وظيفة كمعلمة الأول. نوع الكائن الحدث يعتمد على حدث معين. على سبيل المثال، "click" الحدث ينتمي إلى كائن MouseEvent. |
| useCapture | اختياري. قيمة منطقية التي تحدد ما إذا كان ينبغي تنفيذ الحدث في التقاط أو في مرحلة السطح. القيم الممكنة:
|
تفاصيل تقنية
| صفحة DOM: | المستوى 2 دوم الأحداث |
|---|---|
| قيمة الإرجاع: | لا قيمة الإرجاع |
| التغيير: | أصبحت المعلمة useCapture اختيارية في فايرفوكس 6 وأوبرا 11.60 (has always been optional for Chrome, IE and Safari) |
مزيد من الأمثلة
مثال
يمكنك أيضا الرجوع إلى الخارجية "named" وظيفة:
document.addEventListener("click",
myFunction);
function myFunction() {
document.getElementById("demo").innerHTML = "Hello World";
}
انها محاولة لنفسك » مثال
يمكنك إضافة العديد من الأحداث على الوثيقة، دون الكتابة فوق الأحداث الحالية.
يوضح هذا المثال كيفية إضافة إلى اثنين من فوق الأحداث لهذه الوثيقة:
document.addEventListener("click",
myFunction);
document.addEventListener("click", someOtherFunction); انها محاولة لنفسك » مثال
يمكنك إضافة أحداث من أنواع مختلفة للوثيقة.
يوضح هذا المثال كيفية إضافة العديد من الأحداث على الوثيقة:
document.addEventListener("mouseover", myFunction);
document.addEventListener("click", someOtherFunction);
document.addEventListener("mouseout", someOtherFunction); انها محاولة لنفسك » مثال
عند تمرير قيم المعلمات، استخدم "anonymous function" الذي يستدعي وظيفة محددة مع المعلمات:
document.addEventListener("click", function() {
myFunction(p1, p2);
}); انها محاولة لنفسك » مثال
تغيير لون خلفية المستند <body> العنصر:
document.addEventListener("click", function(){
document.body.style.backgroundColor = "red";
}); انها محاولة لنفسك » مثال
باستخدام removeEventListener() طريقة لإزالة معالج الحدث الذي تم إرفاقه مع addEventListener() الأسلوب:
// Attach an event handler to the document
document.addEventListener("mousemove",
myFunction);
// Remove the event handler from the document
document.removeEventListener("mousemove", myFunction); انها محاولة لنفسك » مثال
لالمتصفحات التي لا تدعم addEventListener() الطريقة، يمكنك استخدام attachEvent() الأسلوب.
يوضح هذا المثال حل عبر متصفح:
if (document.addEventListener) { // For all major browsers, except IE 8 and earlier
document.addEventListener("click", myFunction);
} else if (document.attachEvent) { // For IE 8 and earlier versions
document.attachEvent("onclick", myFunction);
} انها محاولة لنفسك » صفحات ذات صلة
جافا سكريبت تعليمي: HTML DOM EventListener
HTML DOM المرجعي: العنصر. addEventListener()