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

أحدث ميزات معالج الحدث في JavaScript هي الاستماع إلى الحدث. يراقب معالج الحدث الحدث على العنصر.

سنستخدمaddEventListener()لإستبدال تخصيص الحدث مباشرة إلى الخاصية على العنصر.

استخدام طريقة addEventListener()

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

يمكننا تعديل مثال الألوان العشوائية (من الفصل السابق) كما يلي:

document.querySelector("button").addEventListener("click", bgChange);
function bgChange() {
　　　let color = "rgb(" + random(255) + "," + random(255) + "," + random(255) + ")";
　　　document.body.style.backgroundColor = color;
}

نحن ما زلنا نستخدم معمن قبلالنفسbgChange()الدالة. سنقوم بaddEventListener()تم إضافة الطريقة إلى الزر.

addEventListener() تقبل معاملين إلزاميين - الحدث الذي نريد الاستماع إليه والدالة الاستماع كرد فعل.

هذه الطريقة مشابهة جدًا لخصائص معالج الحدث (في الفصل السابق)، ولكن النحو يختلف بشكل واضح.

النحو:

element.addEventListener(event, listener, useCapture)

المتغير الأول هو نوع الحدث (مثل "نقر" أو "تحرك فأرة").

المعامل الثاني هو الدالة الاستماع التي سنقوم بتشغيلها عند حدوث الحدث.

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

أضف استماعًا إلى الحدث إلى العنصر

لاحظ أنك يجب أن تضع جميع الكود داخلaddEventListener()هذا مناسب جدًا في الدوال الغير معروفة داخل الدوال، مثلما يلي:

let para = document.querySelector("#para");
para.addEventListener("click", function() {
this.innerHTML = "Hello world";
});

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

let para = document.querySelector("#para");
para.addEventListener("click",　changeText);
function　changeText()　{
　　　para.innerHTML　=　"مرحبًا بالعالم";
}

إضافة عدة استماعات الحدث لنفس العنصر

من الخارج، يبدو استماع الحدث مشابهًا جدًا لصفات معالج الحدث، ولكن لديهم بعض المزايا. يمكننا تعيين عدة استماعات الحدث لنفس العنصر، مثل المثال التالي:

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);
});

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

إضافة إلى ذلك، يمكنكaddEventListener()فيالوثيقةوالنافذةعلى العنصر.

في هذا المثال، نستخدم ما يليaddEventListener()الطريقة تضيف الحدث (click) إلى الوثيقة:

document.addEventListener("click",　function()　{
alert("مرحبًا بالعالم!!!");
});

في هذا المثال، نستخدم هذاaddEventListener()الطريقة تضيف الحدث (resize) لتغيير الحجم إلى نافذة：

window.addEventListener("resize",　function()　{
box.innerHTML = Math.random();
});

حاليًا، هو الطريقة الأكثر شيوعًا والاختيار المفضل لمعالجة الأحداث في JavaScript.

طريقة removeEventListener()

يمكن أيضًا استخدامremoveEventListener()يتم إزالة أحداث العنصر أو جميع الأحداث منه.

var box = document.getElementById("para");
// ربط معالج الحدث إلى عنصر P بمعرف "para"
box.addEventListener("mousemove", myFunc);
// إزالة معالج الحدث من عنصر P بمعرف "para"
box.removeEventListener("mousemove", myFunc);

المتغير الأول هو نوع الحدث (مثل "نقر" أو "تحرك فأرة").

المتغير الثاني هو الدالة التي سنقوم بتشغيلها عند حدوث الحدث.

قراءة أكثر

مرجع JavaScript:مرجع وحدة أحداث HTML DOM