تم إنشاء c4a.dev لمساعدتك على التركيز أثناء مُشاهدة الكورسات والإبتعاد عن إزعاج اليوتيوب (تعلم بروقااان👌)
كيفية الشراء من الموقع

منطقة إعلانية

يُمكننا وضع إعلانك هنا 🧡 ويُمكنك التواصل معنا عن طريق صفحة الفيس بوك

سعر الإعلان 3$ فى اليوم الواحد

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();
} ) ;

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

#7 javascript window

فى هذا الفيديو تم شرح
الوقتالشرح
00:00javascript window
06:44javascript function ملخص
09:30javascript addEventListener

#7.1 شرح addeventlistener javascript

فى هذا الفيديو تم شرح
الوقتالشرح
00:00addeventlistener javascript شرح
05:10مراجعة CSS
09:08javascript Task

#7.2 method is build-in function

فى هذا الفيديو تم شرح
الوقتالشرح
00:00javascript document.createelement
03:05javascript append VS prepend
05:09javascript innerText
08:11javascript method is build-in function

#7.3 كيف المتصفح يقرأ الأكواد ؟

فى هذا الفيديو تم شرح
الوقتالشرح
00:00javascript Events
01:10javascript Events objects
04:08javascript addeventlistener & function expression
07:07كيف المتصفح يقرأ الأكواد ؟

#7.4 javascript event object

فى هذا الفيديو تم شرح
الوقتالشرح
00:00eo=event object
04:30eo.target
07:20انا عارف انك مش فاهم ههههه
😡
انت مشغل الـ AdBlock !!

يعنى انت مش مُنتسب فى القناة ولا مُشترك فى كورس يوديمى وكمان مشغل الأدبلوك فى الموقع !! 😢