في هذا الدرس 7تصفّح المواضيع
EventListener هي عبارة عن function دالة تبدأ عملية محددة مسبقًا إذا حدث حدث معين, و EventListener تكون دائماً في انتظار event حدث وهذا الحدث تقوم بحفظة عندما يقوم مطوري جافا سكريبت بإضافته لها, هذه القائمة يتم حفظ بداخلها أنواع مختلفة من الأحداث مثل mouse eventsأو keyboard events إلخ.
كيف تعمل دالة EventListener في لغة جافا سكريبت:
- مرحلة الانتظار: لكل عنصر داخل EventListener قائمة انتظار هذه القائمة تنتظر إضافة event حدث جديد من مطوري جافا سكريبت.
- مرحلة الإضافة: عن طريق دالة addEventListener يتم إضافة event حدث جديد لكل عنصر.
- مرحلة الحذف: عن طريق دالة removeEventListener يتم حذف event حدث من قائمة الأحداث لعنصر محدد.
دالة ()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";
});تنفيذ أكثر من حدث لنفس العنصر عن طريق دالة 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()});تنفيذ حدث مع كائن window عن طريق دالة addEventListener في لغة جافا سكريبت.
JavaScript Event Handler window
دالة addEventListener مع كائن window في لغة جافا سكريبت.
let number = document.getElementById("number");
window.addEventListener("resize", function(){
document.getElementById("number").innerHTML = Math.random();
});يجب عند استدعاء دالة داخل دالة 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);تستخدم دالة ( )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);
});عامل 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);سجّل الدخول لحفظ تقدمك
تابع إنجاز المواضيع والمصطلحات والمهام، وكمّل من آخر خطوة على أي جهاز.