طباعة - دورة برمجة JavaScript مجانا الدرس السابع

دورة برمجة JavaScript مجانا الدرس السابع

ناروتو

11-01-2025 02:32 صباحاً

دورة برمجة JavaScript - الدرس السابع: التعامل مع الأحداث (Events)
في هذا الدرس، سنتعلم كيفية التعامل مع الأحداث في JavaScript. الأحداث هي عبارة عن تفاعلات تحدث في المتصفح نتيجة لقيام المستخدم بنشاط ما، مثل النقر على زر أو تحريك الماوس. سنتعرف على كيفية ربط JavaScript مع هذه الأحداث وجعل تطبيقاتنا تفاعلية.
1. ما هو الحدث (Event)؟
الحدث هو عبارة عن تفاعل من قبل المستخدم أو المتصفح مع عنصر من عناصر صفحة الويب. يمكن أن تكون هذه الأحداث مثل النقر، التحريك، الكتابة في حقل نصي، تحميل الصفحة، وغيرها من التفاعلات.
2. أنواع الأحداث:
بعض الأمثلة على أنواع الأحداث:

CODE
```
click
```
: يحدث عندما ينقر المستخدم على عنصر.
CODE
```
mouseover
```
: يحدث عندما يحرك المستخدم الماوس فوق عنصر.
CODE
```
keydown
```
: يحدث عندما يضغط المستخدم على مفتاح في لوحة المفاتيح.
CODE
```
submit
```
: يحدث عند إرسال نموذج (form).
CODE
```
load
```
: يحدث عند تحميل صفحة أو مورد.

3. ربط JavaScript مع الأحداث:
يمكنك ربط JavaScript مع حدث معين عن طريق استخدام الخاصية المناسبة في HTML أو عبر استخدام JavaScript.
3.1. ربط الأحداث باستخدام HTML:
يمكنك ربط الحدث مباشرة باستخدام السمات في HTML، مثل

CODE

onclick

CODE

onmouseover

CODE

onkeyup

، وغيرها.
مثال:

CODE

<button onclick="alert('تم النقر!'">اضغط هنا</button>

في هذا المثال، عندما ينقر المستخدم على الزر، سيتم عرض رسالة منبثقة تحتوي على النص "تم النقر!".
3.2. ربط الأحداث باستخدام JavaScript:
يمكنك أيضًا ربط الأحداث باستخدام JavaScript. عادةً ما يتم ذلك عبر استخدام

CODE

addEventListener()

.
مثال:

CODE

<button id="myButton">اضغط هنا</button>
<script>
  let button = document.getElementById("myButton";
  
  button.addEventListener("click", function() {
    alert("تم النقر باستخدام addEventListener!";
  });
</script>

هنا، قمنا باستخدام

CODE

addEventListener()

لربط حدث النقر على الزر بالحدث الذي يعرض رسالة منبثقة.
4. أنواع التعامل مع الأحداث:
يمكنك أن تتعامل مع الأحداث بطرق متعددة مثل:

التعامل مع الحدث مباشرة: باستخدام دالة تُنفذ عند حدوث الحدث.
الحدث الموجه (Event Delegation): حيث يتم ربط حدث واحد بعنصر عام (مثل الـ

CODE
```
document
```
) ويتم تحديد العنصر المستهدف داخل الحدث.

4.1. التعامل مع الحدث مباشرة:
مثال باستخدام

CODE

click

CODE

<button id="myButton">اضغط هنا</button>
<script>
  let button = document.getElementById("myButton";
  button.onclick = function() {
    alert("تم النقر باستخدام onclick!";
  };
</script>

4.2. الحدث الموجه (Event Delegation):
يمكنك ربط الحدث بعنصر أبوي والتعامل مع الأحداث التي تحدث في العناصر الأبناء.
مثال:

CODE

<ul id="myList">
  <li>عنصر 1</li>
  <li>عنصر 2</li>
  <li>عنصر 3</li>
</ul>
<script>
  let list = document.getElementById("myList";
  list.addEventListener("click", function(event) {
    if (event.target.tagName === "LI" {
      alert("تم النقر على: " + event.target.textContent);
    }
  });
</script>

هنا، نحن نربط حدث النقر بقائمة (

CODE

ul

) ونتحقق إذا كان العنصر الذي تم النقر عليه هو

CODE

li

، ثم نعرض اسم العنصر.
5. تمرير المعلومات مع الحدث:
يمكنك تمرير معلومات إضافية إلى دالة الحدث باستخدام خاصية

CODE

event

التي تحتوي على تفاصيل عن الحدث الذي وقع.
مثال:

CODE

<button id="myButton">اضغط هنا</button>
<script>
  let button = document.getElementById("myButton";
  button.addEventListener("click", function(event) {
    console.log(event);  // سيتم طباعة معلومات مفصلة عن الحدث
    alert("تم النقر!";
  });
</script>

6. منع التصرف الافتراضي (Prevent Default Action):
في بعض الحالات، قد ترغب في منع التصرف الافتراضي للحدث. على سبيل المثال، إذا كنت تعمل مع نموذج وكنت لا تريد أن يتم إرسال النموذج بشكل افتراضي عند النقر على زر "إرسال"، يمكنك استخدام

CODE

preventDefault()

.
مثال:

CODE

<form id="myForm">
  <input type="text" placeholder="أدخل نص">
  <button type="submit">إرسال</button>
</form>
<script>
  let form = document.getElementById("myForm";
  form.addEventListener("submit", function(event) {
    event.preventDefault();  // منع التصرف الافتراضي (إرسال النموذج)
    alert("تم منع إرسال النموذج!";
  });
</script>

في هذا المثال، عند النقر على زر "إرسال"، سيُمنع إرسال النموذج ويتم عرض رسالة منبثقة بدلاً من ذلك.
7. التوقف عن انتشار الحدث (Stop Event Propagation):
إذا كنت لا تريد أن يستمر الحدث في الانتشار إلى عناصر أخرى في الشجرة (مثل التفاعل مع عناصر الأب)، يمكنك استخدام

CODE

stopPropagation()

.
مثال:

CODE

<div id="parent">
  <button id="myButton">اضغط هنا</button>
</div>
<script>
  let button = document.getElementById("myButton";
  let parent = document.getElementById("parent";
  button.addEventListener("click", function(event) {
    alert("تم النقر على الزر!";
    event.stopPropagation();  // التوقف عن انتشار الحدث
  });
  parent.addEventListener("click", function() {
    alert("تم النقر على الأب!";
  });
</script>

في هذا المثال، سيتم عرض "تم النقر على الزر!" عند النقر على الزر، ولكن الحدث لن ينتقل إلى العنصر الأب (

CODE

div

) بسبب

CODE

stopPropagation()

.
8. الأحداث مع الماوس:
JavaScript يوفر أيضًا مجموعة من الأحداث التي تتعامل مع حركة الماوس، مثل:

CODE
```
mouseover
```
: يحدث عندما يدخل الماوس داخل العنصر.
CODE
```
mouseout
```
: يحدث عندما يخرج الماوس من العنصر.
CODE
```
mousemove
```
: يحدث عندما يتحرك الماوس داخل العنصر.

مثال:

CODE

<div id="myBox" style="width: 200px; height: 200px; background-color: lightblue;">
  مرر الماوس فوق الصندوق!
</div>
<script>
  let box = document.getElementById("myBox";
  box.addEventListener("mouseover", function() {
    box.style.backgroundColor = "lightgreen";  // تغيير اللون عند المرور بالماوس
  });
  box.addEventListener("mouseout", function() {
    box.style.backgroundColor = "lightblue";  // إعادة اللون عند الخروج بالماوس
  });
</script>

ملخص الدرس:
في هذا الدرس، تعلمنا كيفية:

ربط الأحداث بعناصر HTML باستخدام

CODE
```
onclick
```
و

CODE
```
addEventListener()
```
.
التعامل مع أنواع مختلفة من الأحداث مثل

CODE
```
click
```
و

CODE
```
mouseover
```
.
منع التصرف الافتراضي باستخدام

CODE
```
preventDefault()
```
.
التوقف عن انتشار الحدث باستخدام

CODE
```
stopPropagation()
```
.
استخدام الأحداث الخاصة بالماوس مثل

CODE
```
mouseover
```
و

CODE
```
mouseout
```
.

الدرس المقبل سيركز على العمل مع واجهات برمجة التطبيقات (APIs) في JavaScript.

[ :: ملتقـــى شباب سبيـــس بــاور :: ]