recent
أخبار ساخنة

توضيح مفهوم Events و AddEvenListener في جافاسكربت JavaScript الدرس |19|

الصفحة الرئيسية
مفهوم Events و AddEvenListener في جافاسكربت JavaScript

مفهوم Events و AddEvenListener

درسنا اليوم يعتبر من اهم الدروس فلذلك ننصحكم بمراجعته عدة مرات للفهم اكثر, سوف نستخدم في درسنا طريقتين الأولى عبر function و الثانية عبر class.

عناصر Events في جافاسكربت

  • عند النقر على العنصر نستخدم onclick.
  • عند تغيير العنصر نستخدم onchange.
  • عندما يكون الماوس على العنصر نستخدم onmouseover.
  • عند يكون الماوس بيعدا عن العنصر onmouseout.
  • عند إستخدام الكيبورد نستخدم onkeydown.
  • عند تحملي الصفحة نستخدم onload.
مثال
 function change_background(){
    document.getElementById("body").style.background = "red";
}

وفي ملف html نضع زر و id كالتالي

العنصر onclick في جافاسكربت

<body>
    <button onclick="change_background()">تغييرالخلفية</button>
</body>

شرح المثال
في ملف الجافاسكربت انشأنا function بالاسم change_background() و انشأنا في ملف html زر بالاسم تغيير الخلفية واعطيناه الخاصية onclick ووضعنا للزر الفنكشن change_background ليتم عند النقر عليه تنفيذ الاوامر في ملف الجافاسكربت ووضعنا لجسم الصفحة id كي يقوم بتنفيذ الاوامر في budy و اعطيناه اللون الاحمر, وهنا عند الضغط على الزر مباشرتاً سوف تتغير الخلفية للون الذي اعطيناه لل id في الجافاسكربت.

وفي المتصفح تكون النتيجة عند الضغط على الزر

 
كما لاحظنا مجرد ضغطنا على الزر تغير الخلفية باللون الاحمر.

العنصر onmouseover في جافاسكربت

<body>
    <button onmouseover="change_background()">تغييرالخلفية</button>
</body>
هنا سوف يتغير لون الخلفية مجرد تقريب الماوس من الزر.

العنصر onmouseout في جافاسكربت

<body>
    <button onmouseout="change_background()">تغييرالخلفية</button>
</body>
 
هنا سوف تتغير الخلفية مجرد ان ابتعد مؤشر الماوس بعيداً عن الزر.

العنصر onkeydown في جافاسكربت

سننشئ وسم input لاستخدام onkeydown
<body>
     <button onmouseout="change_background()">تغييرالخلفية</button>
     <input type="text" onkeydown="change_background()">
</body>
 
هنا سوف تتغير الخلفية مجرد ان تم استعمال الكيبورد و كتابة اي شيئ ضمن فراغ input.

العنصر onload في جافاسكربت

function change_background(){
document.getElementById("body").style.background = "red";
alert("onload يعمل بنجاح");
}
window.onload = change_background();
 
هنا سوف تتغير الخلفية عند تحديث الصفحة ويظهر ديالوك alert يقول onload يعمل بنجاح.

العنصر onchange في جافاسكربت

 class Home{
constructor(){
this.change_background();
var button = document.getElementById("button");
button.addEventListener("click", () =>{
this.change_background();
});
}
change_background(){
document.getElementById("body").style.background = "red";
}
}
onload = new Home();


وضمن ملف html ننشئ زر button مرتبط بـ id كالتالي 
<button id="button">تغيير الخلفية</button>

شرح المثال
قمنا بإنشاء class بإسم Home وضمن هذا الكلاس يجب ان يكون العنصر constractor ,لتشغيله وضعنا بالأخير onload = new Home(); و طلبنا منه تشغيل الكلاس Home ,ووضعنا ميثود بأسم change_background() و ضمن الاقواس المعكوفة وضعنا له اوامر التشغيل في حال تشغيل هذا الميثود, نحن سنقوم بتغيير الخلفية له اوامر التشغيل هذه
document.getElementById("body").style.background = "red";

ولتشغيله اضفنا this.change_background(); لتشغيله مباشرتاً, لكن نحن نريده بحال النقر على احد العناصر يعمل, و كتبنا بصفحة html عنصر button كالتالي
<button id="button">تغيير الخلفية</button>
 
لتحديد button ضمن جافاسكربت وضعناه في متغير var ثم حددنا المتغير كالتالي button.addEventListener ووضعنا له ضمن الاقواس click اي عند النقر, وبعده انشانا اقواس وضعنا اشارة => واعطيناه الميثود الذي نريد تشغيلها عبر this ووضيفة this هو يتيح لنا الوصول لعناصر الكلاس الذي خارج الكونستركتر, مثل الميثود و المتغيرات وغيرها .
ووضعنا الجزء
this.change_background();
ضمن تعليق كي لا ينفذها مباشرتاً.
google-playkhamsatmostaqltradent