JavaScript

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

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

التاريخ

11 نوفمبر 2021

الدروس

146

المستوى

العامة

اللغة

انجليزي

المشاهدات

1261

المواضيع

24
الشروحات chevron_left JavaScript DOM EventListener chevron_left JavaScript

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

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

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


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

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

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

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


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

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

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

element.addEventListener(event, function, useCapture);

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

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


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

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

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

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

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

myBtn.addEventListener("click", function(){color()});
myBtn.addEventListener("click", function(){background()});
JavaScript many Event Handlers

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

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 في لغة جافا سكريبت.

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 في لغة جافا سكريبت.

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

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

element.addEventListener("mousemove", randomiz());
JavaScript addEventListener call function

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

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 لحذف حدث ما من عنصر محدد في لغة جافا سكريبت.

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 في لغة جافا سكريبت.

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);
معلومات تهمك
  • لا تنسى تقييم الدروس لكي نُحدّث المُحتوى باستمرار حتى ينال إعجابك.
  • لا تنسى مشاركة الموقع مع أصدقاءك حتى تعمّ الفائدة وتكون سبب في نفعهم.
مشاركة
0
0
0
0
عدد المشاركات
هل هذه المعلومات نالت إعجابك ؟
0
0
عدد التقييمات

لديك استفسار ؟

يسعدنا كثيرا مساعدتك في استيعاب افضل للأمور, فلا تترد مطلقا في الاتصال بنا في حال كانت لديك اية اسئله او استفسارات.