انتقل إلى محتوى الدرس
ابدأ رحلتك
الدرس 56
دورة جافا سكريبت

دوال EventListener في لغة جافا سكريبتJavaScript DOM EventListener

سوف تتعلم في هذا الدرس دالة من احد اهم الدوال في JavaScript DOM والتي تستخدم في إضافة events حدث ما لعناصر معين وهي دالة addEventListener بالإضافة إلي دالة removeEventListener.

ابدأ التعلّم استكشف الأمثلة
أقسام الدرس
7
الأمثلة
10
اللغة
العربية
تاريخ النشر
غير محدد
المشاهدات
2,585
محتوى الدرس
في هذا الدرس 7تصفّح المواضيع

JavaScript EventListener EventListener في لغة جافا سكريبت

EventListener هي عبارة عن function دالة تبدأ عملية محددة مسبقًا إذا حدث حدث معين, و EventListener تكون دائماً في انتظار event حدث وهذا الحدث تقوم بحفظة عندما يقوم مطوري جافا سكريبت بإضافته لها, هذه القائمة يتم حفظ بداخلها أنواع مختلفة من الأحداث مثل mouse eventsأو keyboard events إلخ.


كيف تعمل دالة EventListener في لغة جافا سكريبت:

  1. مرحلة الانتظار: لكل عنصر داخل EventListener قائمة انتظار هذه القائمة تنتظر إضافة event حدث جديد من مطوري جافا سكريبت.
  2. مرحلة الإضافة: عن طريق دالة addEventListener يتم إضافة event حدث جديد لكل عنصر.
  3. مرحلة الحذف: عن طريق دالة removeEventListener يتم حذف event حدث من قائمة الأحداث لعنصر محدد.

JavaScript addEventListener دالة addEventListener في لغة جافا سكريبت

دالة ()addEventListener تقوم بإضافة event حدث معين لعنصر محدد داخل قائمة الأنتظار EventListener في لغة جافا سكريبت.


دالة ()addEventListener في لغة جافا سكريبت:

  • دالة addEventListener لا تقوم بتبديل event موجود ولكن تضيف حدث جديد علي قائمة الأحداث لعنصر محدد.
  • يمكن عن طريق دالة addEventListener إضافة أي عدد من الاحداث لأي عنصر.
  • يمكن إضافة أكثر من حدث بنفس النوع لنفس العنصر مثل إضافة click ثم إضافة حدث click اخر لنفس العنصر.
  • يمكن إضافة عن طريق دالة addEventListener احداث لكائن window.

JavaScript addEventListener syntax

طريقة كتابة دالة addEventListener في لغة جافا سكريبت.

HTML 
element.addEventListener(event, function, useCapture);

</> JavaScript addEventListener parameters
معطيات أو عوامل دالة addEventListener في لغة جافا سكريبت

  • event الحدث الذي يتم إلحاقه بالعنصر مثل click.
  • function دالة يتم استدعائها ويكون بداخلها أمر أو مجموعة أوامر برمجية تنفذ فور وقوع الحدث.
  • capturing هي قيمة boolean منطقية اختيارية true أو false وهي تفيد بالتقاط الحدث أم حدوث فقاعة.



</> JavaScript addEventListener utility
وظيفة دالة addEventListener في لغة جافا سكريبت

حذف حدث من قائمة انتظار EventListener لعنصر محدد من الأحداث الموجودة مسبقاً.

JavaScript addEventListener

طريقة إستخدام دالة addEventListener في لغة جافا سكريبت.

HTML 
let myBtn = document.getElementById("myBtn");
let h1 = document.getElementById("h1");
let paragraph = document.getElementById("paragraph");
myBtn.addEventListener("click", function(){ 
  paragraph.style.color = "blue";
  h1.style.color = "red";
});
جرّب بنفسك

JavaScript many Event Handlers أكثر من حدث في لغة جافا سكريبت

تنفيذ أكثر من حدث لنفس العنصر عن طريق دالة addEventListener في لغة جافا سكريبت.

JavaScript same Event

إضافة نفس الحدث لعنصر واحد في لغة جافا سكريبت.

HTML 
myBtn.addEventListener("click", function(){color()});
myBtn.addEventListener("click", function(){background()});
جرّب بنفسك

JavaScript many Event Handlers

إضافة events أكثر من حدث لنفس العنصر في لغة جافا سكريبت.

HTML 
myBtn.addEventListener("mouseover", function(){color()});
myBtn.addEventListener("click", function(){hover()});
myBtn.addEventListener("mouseout", function(){background()});
جرّب بنفسك

JavaScript Event Handler window إضافة حدث لكائن window في لغة جافا سكريبت

تنفيذ حدث مع كائن window عن طريق دالة addEventListener في لغة جافا سكريبت.

JavaScript Event Handler window

دالة addEventListener مع كائن window في لغة جافا سكريبت.

HTML 
let number = document.getElementById("number");
window.addEventListener("resize", function(){
  document.getElementById("number").innerHTML = Math.random();
});
جرّب بنفسك

JavaScript EventListener call a function استدعاء الدوال مع دوال EventListener في لغة JavaScript

يجب عند استدعاء دالة داخل دالة addEventListener او دالة removeEventListener عدم كتابة أقواس الدالة () إذا تم استدعائها بدون function.

JavaScript addEventListener call function

تعمل دالة addEventListener إذا تم استدعاءها بأقواس داخل العامل الثاني وهو function في لغة جافا سكريبت.

HTML 
element.addEventListener("mousemove",function(){
  randomiz()
});

JavaScript addEventListener call function

لا تعمل دالةaddEventListener إذا تم استدعاءها بأقواس في لغة جافا سكريبت.

HTML 
element.addEventListener("mousemove", randomiz());

JavaScript addEventListener call function

تعمل دالةaddEventListener إذا تم استدعاءها بدون أقواس وبدون العامل الثاني وهو function في لغة جافا سكريبت.

HTML 
element.addEventListener("mousemove", randomiz);

JavaScript removeEventListener دالة removeEventListener في لغة JavaScript

تستخدم دالة ( )removeEventListener في حذف event معين من قائمة EventListener تمت إضافته لعنصر محدد.

</> JavaScript removeEventListener parameters
معطيات أو عوامل دالة removeEventListener في لغة جافا سكريبت

  • event الحدث الذي سيتم حذفة بالعنصر مثل click.
  • function دالة يتم استدعائها وهي التي تم إستدعاءها داخل دالة addEventListener.

</> JavaScript removeEventListener utility
وظيفية دالة removeEventListener في لغة جافا سكريبت

  • event الحدث الذي سيتم حذفة بالعنصر مثل click.
  • function دالة يتم استدعائها وهي التي تم إستدعاءها داخل دالة addEventListener.

JavaScript removeEventListener

دالة removeEventListener لحذف حدث ما من عنصر محدد في لغة جافا سكريبت.

HTML 
let number = document.getElementById("number");
let btn = document.getElementById("btn");
window.addEventListener("mousemove", randomiz);

function randomiz(){
  document.getElementById("number").innerHTML = Math.random();
}

btn.addEventListener("click", function(){
  window.removeEventListener("mousemove",randomiz);
});
جرّب بنفسك

JavaScript addEventListener capturing عامل capturing مع دالة addEventListener في لغة جافا سكريبت

عامل capturing مع addEventListener في لغة جافا سكريبت يستخدم لعمل أولوية للأحداث من نفس النوع في لغة جافا سكريبت.

JavaScript addEventListener capturing

طريقة إستخدام دالة addEventListener مع capturing في لغة جافا سكريبت.

HTML 
let myBtn = document.getElementById("myBtn");
myBtn.addEventListener("click", function(){console.log(1)}, false);
myBtn.addEventListener("click", function(){console.log(2)}, true);
myBtn.addEventListener("click", function(){console.log(3)}, false);
myBtn.addEventListener("click", function(){console.log(4)}, true);
جرّب بنفسك

مشاركة

هل كان هذا الدرس مفيدًا؟

جارٍ تحميل الآراء…