برنامج الاستماع إلى أحداث HTML DOM - جافا سكريبت

طريقة addEventListener()

مثال

إضافة مستمع أحداث يُطلق عند ضغط المستخدم على الزر:

document.getElementById("myBtn").addEventListener("click", displayDate);

جربها بنفسك

addEventListener() يضيف هذا الطريقة معالج أحداث معين إلى العنصر المحدد.

addEventListener() يضيف هذا الطريقة معالج أحداث إلى العنصر دون تغطية المعالجات الموجودة بالفعل.

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

يمكنك إضافة عدة معالجات أحداث من نفس النوع إلى العنصر نفسه، مثل اثنين من أحداث "click".

يمكنك إضافة معالج الحدث إلى أي عنصر DOM وليس العناصر HTML فقط، مثل window.

addEventListener() يجعل من السهل التحكم في كيفية تفاعل الحدث مع التفاعل (بالتسلسل).

عند استخدام addEventListener() يحفظ التفريق بين JavaScript وHTML Markups، مما يحقق قراءة أفضل؛ حتى لو لم تكن تتحكم في HTML Markups يمكنك إضافة مستمع الحدث.

يمكنك استخدام removeEventListener() يتم إزالة مستمع الحدث بسهولة.

النحو

element.addEventListener(event, function, useCapture);

الإعداد الأول هو نوع الحدث (مثل "click" أو "mousedown").

الإعداد الثاني هو الدالة التي نحتاج إلى تفعيلها عند حدوث الحدث.

الإعداد الثالث هو قيمة بولية، يحدد إذا كان يجب استخدام تفاعل الحدث (بالتسلسل) أو تفاعل الحدث (بالتسلسل). هذا الإعداد هو اختياري.

ملاحظة:لا تستخدم Präfix "on" مع الأحداث؛ استخدم "click" بدلاً من "onclick".

إضافة معالج الحدث إلى العنصر

مثال

يظهر رسالة "Hello World!" عند النقر على العنصر من قبل المستخدم:

element.addEventListener("click", function(){ alert("Hello World!"); });

جربها بنفسك

يمكنك أيضًا مراجعة الدوال "المسمى" الخارجية:

مثال

يظهر رسالة "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);

جربها بنفسك

إضافة معالج الحدث إلى عنصر Window

addEventListener() يسمح لك بإضافة مستمع الحدث إلى أي عنصر DOM HTML، مثل العناصر HTML أو العناصر HTML أو عنصر window أو أي عنصر يدعم الأحداث، مثل xmlHttpRequest.

مثال

إضافة مستمع الحدث عند تعديل حجم النافذة:

window.addEventListener("resize", function(){
    document.getElementById("demo").innerHTML = sometext;
});

جربها بنفسك

إرسال المعامل

عند إرسال قيمة المعامل، استخدم معامل "anonymous function" لتسمية الدالة المحددة

مثال

element.addEventListener("click", function(){ myFunction(p1, p2); });

جربها بنفسك

انتقال الحدث الفقاعي أم الاستقبالي؟

هناك طريقتين لانتقال الحدث في HTML DOM: الفقاعة والاستقبال.

انتقال الحدث هو طريقة لتحديد ترتيب العناصر عند حدوث الحدث. إذا كان لديك عنصر <div> يحتوي على عنصر <p>، ثم النقر على عنصر <p>، يجب معالجة حدث "click" لأي عنصر أولاً؟

في الفقاعة، يتم معالجة الحدث للعنصر الداخلي أولاً، ثم العناصر الخارجية: أولاً معالجة حدث النقر في العنصر <p>، ثم حدث النقر في العنصر <div>.

في الاستقبال، يتم معالجة الحدث للعنصر الخارجي أولاً، ثم العناصر الداخلية: أولاً معالجة حدث النقر في العنصر <div>، ثم حدث النقر في العنصر <p>.

في طريقة addEventListener()، يمكنك استخدام معامل "useCapture" لتحديد نوع الانتقال:

addEventListener(event, function, useCapture);

القيمة الافتراضية هي false، سيتم استخدام انتقال الفقاعة، إذا تم تعيين هذه القيمة إلى true، فإن الحدث يستخدم انتقال الاستقبال.

مثال

document.getElementById("myP").addEventListener("click", myFunction, true);
document.getElementById("myDiv").addEventListener("click", myFunction, true);

جربها بنفسك

طريقة removeEventListener()

removeEventListener() سيتم حذف البرنامج المعالج للحادث من addEventListener() برنامج معالجة الحدث المضاف للطريقة:

مثال

element.removeEventListener("mousemove", myFunction);

جربها بنفسك

دعم المتصفحات

الرقم في الجدول يحدد إصدار المتصفح الأول الذي يدعم هذه الطرق بالكامل.

الطريقة
addEventListener() 1.0 9.0 1.0 1.0 7.0
removeEventListener() 1.0 9.0 1.0 1.0 7.0

ملاحظة:IE 8،Opera 6.0 وأول إصداراتها لا تدعم addEventListener() و removeEventListener() الطريقة. ولكن، بالنسبة لهذه إصدارات المتصفحات الخاصة، يمكنك استخدام attachEvent()} الطريقة لإضافة معالج أحداث إلى العنصر، ويتم detachEvent() إزالة الطريقة:

element.attachEvent(event, function);
element.detachEvent(event, function);

مثال

حل متعدد المتصفحات:

var x = document.getElementById("myBtn");
if (x.addEventListener) {                    // لمواجهة المتصفحات الرئيسية، باستثناء إصدارات IE 8 وأقل
    x.addEventListener("click", myFunction);
} else if (x.attachEvent) {                  // لمواجهة إصدارات IE 8 وأقل
    x.attachEvent("onclick", myFunction);
}

جربها بنفسك

دليل مرجعي لعنصر أحداث HTML DOM

للحصول على قائمة كاملة بأحداث HTML DOM، يرجى زيارة دليل مرجعي لعنصر أحداث HTML DOM.