و addEventListener() طريقة
مثال
إضافة المستمع الحدث الذي وقع عندما ينقر المستخدم على زر:
document.getElementById("myBtn").addEventListener("click", displayDate); انها محاولة لنفسك » و addEventListener() طريقة تعلق معالج الحدث لعنصر محدد.
و addEventListener() طريقة تعلق معالج الحدث لعنصر دون الكتابة معالجات الأحداث الحالية.
يمكنك إضافة العديد من معالجات الأحداث لعنصر واحد.
يمكنك إضافة العديد من معالجات الأحداث من نفس النوع لعنصر واحد، أي اثنين من "click" الأحداث.
يمكنك إضافة المستمعين الحدث على أي كائن DOM لا عناصر HTML فقط. أي كائن الإطار.
و addEventListener() الأسلوب يجعل من السهل للتحكم في كيفية رد فعل الحدث إلى السطح.
عند استخدام addEventListener() الأسلوب، يتم فصل جافا سكريبت من الترميز HTML، لقراءة أفضل ويسمح لك بإضافة المستمعين الحدث حتى عندما كنت لا السيطرة على الترميز HTML.
يمكنك بسهولة إزالة المستمع الحدث باستخدام removeEventListener() الأسلوب.
بناء الجملة
element .addEventListener( event, function, useCapture );المعلمة الأولى هي نوع من الحدث (مثل "click" أو "mousedown" ).
المعلمة الثانية هي وظيفة نود أن نلفت عند وقوع الحدث.
المعلمة الثالثة هي قيمة منطقية تحدد ما إذا كان استخدام محتدما الحدث أو التقاط الحدث. هذه المعلمة اختيارية.
لاحظ أنك لا تستخدم "on" بادئة لهذا الحدث. استخدام "click" بدلا من "onclick" .
إضافة معالج الحدث لعنصر
مثال
حالة تأهب "مرحبا العالم!" عندما ينقر المستخدم على عنصر:
element .addEventListener("click", function(){ alert("Hello World!"); }); انها محاولة لنفسك » يمكنك أيضا الرجوع إلى وظيفة "المسمى" الخارجية:
مثال
حالة تأهب "مرحبا العالم!" عندما ينقر المستخدم على عنصر:
element .addEventListener("click",
myFunction);
function myFunction() {
alert ("Hello World!");
} انها محاولة لنفسك » إضافة العديد من معالجات الحدث إلى نفس العنصر
و addEventListener() الأسلوب يسمح لك بإضافة العديد من الفعاليات لنفس العنصر، دون الكتابة فوق الأحداث الحالية:
مثال
element .addEventListener("click", myFunction);
element .addEventListener("click", mySecondFunction);
انها محاولة لنفسك » يمكنك إضافة أحداث من أنواع مختلفة لنفس العنصر:
مثال
element .addEventListener("mouseover", myFunction);
element .addEventListener("click", mySecondFunction);
element .addEventListener("mouseout", myThirdFunction); انها محاولة لنفسك » إضافة معالج الحدث إلى كائن النافذة
و addEventListener() الأسلوب يسمح لك لإضافة المستمعين الحدث على أي كائن DOM HTML مثل عناصر HTML، وثيقة HTML، الكائن النافذة، أو غيرها من الأشياء التي تدعم الأحداث، مثل xmlHttpRequest الكائن.
مثال
إضافة المستمع الحدث الذي وقع عند تغيير حجم المستخدم النافذة:
window.addEventListener("resize", function(){
document.getElementById("demo").innerHTML = sometext ;
});
انها محاولة لنفسك » تمرير معلمات
عند تمرير القيم المعلمة، استخدام "وظيفة مجهول" الذي يستدعي وظيفة محددة مع المعلمات:
الحدث محتدما أو الحدث التقاط؟
هناك طريقتان لنشر الحدث في DOM HTML، ظهرت على السطح واسر.
نشر الحدث هو وسيلة لتحديد ترتيب العنصر عند حدوث الحدث. إذا كان لديك <p> العنصر داخل <div> العنصر، وينقر المستخدم على <p> العنصر، الذي العنصر "click" ينبغي التعامل مع الحدث أولا؟
في السطح يتم التعامل مع الحدث الأكثر العنصر الداخلي الأول ثم الخارجي: و <p> يتم التعامل مع العنصر انقر فوق الحدث أولا، ثم <div> العنصر الحدث انقر فوق.
في التقاط يتم التعامل مع الحدث الأكثر العنصر الخارجي الأول ثم الداخلي: و <div> سيتم التعامل مع الحدث انقر فوق العنصر الأول، ثم <p> العنصر الحدث انقر فوق.
مع addEventListener() طريقة يمكنك تحديد نوع التكاثر باستخدام "useCapture" المعلمة:
addEventListener( event , function , useCapture );القيمة الافتراضية هي كاذبة، والتي سوف تستخدم لنشر السطح، عندما تم تعيين القيمة إلى true، يستخدم الحدث نشر اسر.
مثال
document.getElementById("myP").addEventListener("click", myFunction, true);
document.getElementById("myDiv").addEventListener("click", myFunction, true);
انها محاولة لنفسك » و removeEventListener() طريقة
و removeEventListener() طريقة إزالة معالجات الأحداث التي تم إرفاقها مع addEventListener() الأسلوب:
دعم المتصفح
الأرقام في الجدول تحدد أول إصدار المستعرض الذي تؤيد تماما هذه الأساليب.
| طريقة | |||||
|---|---|---|---|---|---|
| addEventListener() | 1.0 | 9.0 | 1.0 | 1.0 | 7.0 |
| removeEventListener() | 1.0 | 9.0 | 1.0 | 1.0 | 7.0 |
ملاحظة: addEventListener() و removeEventListener() لا يتم اعتماد الأساليب في IE 8 و الإصدارات السابقة و Opera 6.0 والإصدارات السابقة. ومع ذلك، لهذه الإصدارات المحددة المتصفح، يمكنك استخدام attachEvent() طريقة لإرفاق معالجات الأحداث إلى العنصر، و detachEvent() طريقة لحذفها:
element. attachEvent (event, function);
element. detachEvent (event,
function); مثال
حل عبر متصفح:
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 الحدث كائن المرجعي
للحصول على قائمة من كافة الأحداث HTML DOM، أن ننظر في موقعنا كاملة HTML DOM الحدث كائن المرجعي .