مثال
إرفاق الحدث انقر فوق ل <button> العنصر. عندما ينقر المستخدم على زر، خرج "Hello World" في <p> عنصر مع معرف = "تجريبي":
document.getElementById("myBtn").addEventListener("click", function(){
document.getElementById("demo").innerHTML = "Hello World";
}); انها محاولة لنفسك » أكثر "Try it Yourself" الأمثلة أدناه.
تعريف والاستخدام
و 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) .
بناء الجملة
element .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" وظيفة.
يوضح هذا المثال كيفية تنفيذ وظيفة عندما ينقر المستخدم على <button> العنصر:
document.getElementById("myBtn").addEventListener("click",
myFunction);
function myFunction() {
document.getElementById("demo").innerHTML = "Hello World";
}
انها محاولة لنفسك » مثال
يمكنك إضافة العديد من الأحداث لنفس العنصر، دون الكتابة فوق الأحداث الحالية.
يوضح هذا المثال كيفية إضافة إلى اثنين من فوق الأحداث على نفس <button> العنصر:
document.getElementById("myBtn").addEventListener("click",
myFunction);
document.getElementById("myBtn").addEventListener("click", someOtherFunction); انها محاولة لنفسك » مثال
يمكنك إضافة أحداث من أنواع مختلفة لنفس العنصر.
يوضح هذا المثال كيفية إضافة العديد من الأحداث على نفس <button> العنصر:
document.getElementById("myBtn").addEventListener("mouseover", myFunction);
document.getElementById("myBtn").addEventListener("click", someOtherFunction);
document.getElementById("myBtn").addEventListener("mouseout", someOtherFunction); انها محاولة لنفسك » مثال
عند تمرير قيم المعلمات، استخدم "anonymous function" الذي يستدعي وظيفة محددة مع المعلمات:
document.getElementById("myBtn").addEventListener("click", function() {
myFunction(p1, p2);
}); انها محاولة لنفسك » مثال
تغيير لون خلفية <button> العنصر:
document.getElementById("myBtn").addEventListener("click", function(){
this.style.backgroundColor = "red";
}); انها محاولة لنفسك » مثال
باستخدام المعلمة useCapture اختياري لإثبات الفرق بين السطح واسر:
document.getElementById("myDiv").addEventListener("click", myFunction,
true); انها محاولة لنفسك » مثال
باستخدام removeEventListener() طريقة لإزالة معالج الحدث الذي تم إرفاقه مع addEventListener() الأسلوب:
// Attach an event handler to <div>
document.getElementById("myDIV").addEventListener("mousemove",
myFunction);
// Remove the event handler from <div>
document.getElementById("myDIV").removeEventListener("mousemove", myFunction); انها محاولة لنفسك » مثال
لالمتصفحات التي لا تدعم addEventListener() الطريقة، يمكنك استخدام attachEvent() الأسلوب.
يوضح هذا المثال حل عبر متصفح:
var x = document.getElementById("myBtn");
if (x.addEventListener) {
// For all major browsers, except IE 8 and earlier
x.addEventListener("click", myFunction);
} else if (x.attachEvent) {
// For IE 8 and earlier versions
x.attachEvent("onclick", myFunction);
} انها محاولة لنفسك » صفحات ذات صلة
جافا سكريبت تعليمي: HTML DOM EventListener
HTML DOM المرجعي: وثيقة. addEventListener()