جافا سكريبت HTML DOM EventListener
طريقة addEventListener ()
مثال
أضف مستمع حدث يتم تنشيطه عندما ينقر المستخدم على زر:
document.getElementById("myBtn").addEventListener("click", displayDate);
تقوم addEventListener()الطريقة بإرفاق معالج حدث بالعنصر المحدد.
تقوم addEventListener()الطريقة بإرفاق معالج حدث بعنصر بدون الكتابة فوق معالجات الأحداث الموجودة.
يمكنك إضافة العديد من معالجات الأحداث إلى عنصر واحد.
يمكنك إضافة العديد من معالجات الأحداث من نفس النوع إلى عنصر واحد ، مثل حدثين "نقر".
يمكنك إضافة مستمعين للأحداث إلى أي كائن DOM وليس فقط عناصر HTML. أي كائن النافذة.
تجعل هذه addEventListener()الطريقة من السهل التحكم في كيفية تفاعل الحدث مع الفقاعات.
عند استخدام addEventListener()الطريقة ، يتم فصل JavaScript عن ترميز HTML ، لقراءة أفضل ويسمح لك بإضافة مستمعين للأحداث حتى عندما لا تتحكم في ترميز HTML.
يمكنك بسهولة إزالة مستمع الحدث باستخدام removeEventListener()الطريقة.
بناء الجملة
element.addEventListener(event, function, useCapture);
المعلمة الأولى هي نوع الحدث (مثل " click" أو " mousedown" أو أي حدث HTML DOM آخر .)
المعلمة الثانية هي الوظيفة التي نريد الاتصال بها عند وقوع الحدث.
المعلمة الثالثة هي قيمة منطقية تحدد ما إذا كان سيتم استخدام فقاعات الحدث أو التقاط الحدث. هذه المعلمة اختيارية.
لاحظ أنك لا تستخدم البادئة "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);
قم بإضافة "معالج الأحداث" إلى كائن النافذة
تسمح لك هذه addEventListener()الطريقة بإضافة مستمعين للأحداث على أي كائن HTML DOM مثل عناصر HTML أو مستند HTML أو كائن النافذة أو الكائنات الأخرى التي تدعم الأحداث ، مثل xmlHttpRequestالكائن.
مثال
أضف مستمع حدث يتم تنشيطه عندما يقوم المستخدم بتغيير حجم النافذة:
window.addEventListener("resize", function(){
document.getElementById("demo").innerHTML = sometext;
});
تمرير المعلمات
عند تمرير قيم المعلمات ، استخدم "دالة مجهولة" تستدعي الوظيفة المحددة بالمعلمات:
مثال
element.addEventListener("click", function(){ myFunction(p1, p2); });
محتدما الحدث أم التقاط الحدث؟
هناك طريقتان لنشر الأحداث في HTML DOM ، الفقاعات والتقاطها.
انتشار الحدث هو وسيلة لتعريف ترتيب العنصر عند وقوع الحدث. إذا كان لديك عنصر <p> داخل عنصر <div> ، ونقر المستخدم على العنصر <p> ، فما حدث "النقر" الخاص بالعنصر الذي يجب التعامل معه أولاً؟
في وضع الفقاعات الداخلية لحدث معظم العناصر يتم التعامل معها أولاً ثم الحدث الخارجي: يتم التعامل مع حدث نقر العنصر <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);
مرجع كائن حدث HTML DOM
للحصول على قائمة بجميع أحداث HTML DOM ، انظر إلى مرجع كائن حدث HTML DOM الكامل .