JavaScript DOM EventListener
دوال EventListener في لغة جافا سكريبت
سوف تتعلم في هذا الدرس دالة من احد اهم الدوال في JavaScript DOM والتي تستخدم في إضافة events حدث ما لعناصر معين وهي دالة addEventListener بالإضافة إلي دالة removeEventListener.
التاريخ
الدروس
المستوى
اللغة
المشاهدات
المواضيع
الشروحات chevron_left JavaScript DOM EventListener chevron_left JavaScript
DOM EventListener
دوال EventListener في لغة جافا سكريبت
</>
JavaScript EventListener
EventListener في لغة جافا سكريبت
EventListener هي عبارة عن function دالة تبدأ عملية محددة مسبقًا إذا حدث حدث معين, و EventListener تكون دائماً في انتظار event حدث وهذا الحدث تقوم بحفظة عندما يقوم مطوري جافا سكريبت بإضافته لها, هذه القائمة يتم حفظ بداخلها أنواع مختلفة من الأحداث مثل mouse eventsأو keyboard events إلخ.
كيف تعمل دالة EventListener في لغة جافا سكريبت:
- مرحلة الانتظار: لكل عنصر داخل EventListener قائمة انتظار هذه القائمة تنتظر إضافة event حدث جديد من مطوري جافا سكريبت.
- مرحلة الإضافة: عن طريق دالة addEventListener يتم إضافة event حدث جديد لكل عنصر.
- مرحلة الحذف: عن طريق دالة removeEventListener يتم حذف event حدث من قائمة الأحداث لعنصر محدد.
هام
</>
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 في لغة جافا سكريبت
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);
CLOSETAG
منصة كلوز تاج التعليمية المتخصصة في تعليم البرمجة. نسعى لتقديم تجربة تعلم فريدة من خلال معسكراتنا العملية والمنظمة والمتسلسلة كما نهدف إلى تقليص الفجوة بين النظرية والتطبيق العملي؛ لذا فإننا نركز على التعليم القائم على المشاريع والتطبيقات الحقيقية. ننقل لك سنوات من الخبرة في أقل وقت ممكن تحت إشراف مهندسين عباقرة عملوا في أكبر الشركات العربية والعالمية في مجال البرمجة. مهمتنا ليست فقط تعليم البرمجة، بل نسعى أيضًا لتزويدك بمجموعة من المهارات التي تتوافق مع احتياجات سوق العمل.
