JavaScript addEventListener( )

( )addEventListener هى تعتبر built-in function و الـ built-in Functions فى الجافا سكريبت تُسمى Method

هى تقوم بالاستماع الى الحدث القادم من الزائر وبناءا على هذا الحدث تقوم بتفيذ مجموعة من الأوامر

⚠ حدث يعنى Event

طريق الكتابة :

HTML element.addEventListener( "event" , function )

بالنسبة لل event

يوجد العديد من الـ events فى الجافا سكريبت مثل الـ click
هنا تجد العديد من الـ events

بالنسبة لل function

- فيُمكنك كتابة الـ function مباشرة داخل الأقواس (فى هذه الحالة يُفضل استخدام الـ Arrow function)

HTML element.addEventListener(

"click" , ( )=> { تنفيذ مجموعة من الأوامر }

)

- أو ان تكون الـ function تم كتابتها من قبل ثم نكتب اسم الـ function مباشرة داخل الأقواس

HTML element.addEventListener( "click" , myFunctionName )

eo.target

⚠ سيتم شرح هذا الجزء فى الفيديو الخاص بهذا الدرس لأنها تحتاج الى شرح عملى أكثر النظرى.

eo : تُعبر عن الجماعة أو الفريق (Event Objects)

eo.target تٌعبر عن العنصر الذى يتم عليه الحدث فى هذه المنطقة

eo : تكون بداخل الأقواس

مثال على ذلك :

const myBtn=document.getElementById("btn");

myBtn .addEventListener ( "click", (eo)=> {
eo.target .style.background-color="crimson";
} ) ;

مثال اخر

const myBtn=document.getElementById("btn");

myBtn .addEventListener ( "click", (eo)=> {
eo.target .remove();
} ) ;

الفيديوهات الخاصة بالدرس