الوحدة 7: التعامل مع الأحداث (Event Handling) في JavaScript

ahmed nabelByahmed nabel كورس JavaScript

إليك كورس كامل عن الوحدة 7: التعامل مع الأحداث (Event Handling) في JavaScript، التي تشرح كيفية التعامل مع الأحداث في المتصفح، مثل النقر على الأزرار، تمرير الماوس، كتابة النصوص في الحقول، وغيرها.

الوحدة 7: التعامل مع الأحداث (Event Handling) في JavaScript

الدرس 1: مقدمة في التعامل مع الأحداث

  • المفهوم الأساسي: الأحداث هي الأنشطة أو التفاعلات التي تحدث في المتصفح، مثل النقر على زر أو تغيير النص في حقل إدخال. يمكننا التعامل مع هذه الأحداث باستخدام JavaScript.
1. ما هي الأحداث؟
  • في JavaScript، الحدث هو تفاعل يحدث عند قيام المستخدم بعمل معين في الصفحة، مثل النقر على زر أو تمرير الماوس.
  • أنواع الأحداث:
    • click: عند النقر على عنصر.
    • mouseover: عندما يتحرك الماوس فوق عنصر.
    • keydown: عندما يتم الضغط على زر من لوحة المفاتيح.
    • change: عندما يتغير محتوى عنصر إدخال.
    • submit: عند إرسال نموذج.

الدرس 2: ربط الأحداث بالعناصر

  • المفهوم: يمكن ربط حدث ما بعنصر معين باستخدام JavaScript بحيث عندما يحدث هذا الحدث، يتم تنفيذ وظيفة معينة.
1. استخدام onclick للتعامل مع حدث النقر
  • يمكنك ربط حدث النقر بزر أو عنصر آخر.
    html
    <button id="myButton">اضغط هنا</button>

    <script>
    document.getElementById("myButton").onclick = function() {
    alert("تم النقر على الزر!");
    };
    </script>

2. استخدام addEventListener() للتعامل مع الأحداث
  • الطريقة الأفضل والأكثر مرونة هي استخدام addEventListener()، حيث يمكن ربط أكثر من حدث بنفس العنصر.
    html
    <button id="myButton">اضغط هنا</button>

    <script>
    document.getElementById("myButton").addEventListener("click", function() {
    alert("تم النقر على الزر باستخدام addEventListener!");
    });
    </script>

الدرس 3: أنواع الأحداث الشائعة

  • المفهوم: هناك العديد من أنواع الأحداث التي يمكن التعامل معها في JavaScript.
1. أحداث الفأرة (Mouse Events)
  • click: عند النقر على عنصر.
  • mouseover: عندما يمرر المستخدم الماوس فوق عنصر.
  • mouseout: عندما يخرج الماوس من عنصر.
  • mousedown: عند الضغط على زر الماوس.
  • mouseup: عند رفع زر الماوس.
html
<button id="myButton">اضغط هنا</button>

<script>
let button = document.getElementById("myButton");

button.addEventListener("mouseover", function() {
button.style.backgroundColor = "yellow"; // تغيير اللون عند مرور الماوس
});

button.addEventListener("mouseout", function() {
button.style.backgroundColor = ""; // إعادة اللون عند مغادرة الماوس
});
</script>

2. أحداث لوحة المفاتيح (Keyboard Events)
  • keydown: عند الضغط على مفتاح في لوحة المفاتيح.
  • keyup: عند رفع الإصبع عن مفتاح في لوحة المفاتيح.
html
<input type="text" id="myInput" placeholder="اكتب هنا">

<script>
document.getElementById("myInput").addEventListener("keydown", function(event) {
console.log("تم الضغط على الزر: " + event.key); // طباعة اسم الزر الذي تم الضغط عليه
});
</script>

3. أحداث نموذج الإدخال (Form Events)
  • submit: عند إرسال النموذج.
  • change: عند تغيير محتوى عنصر إدخال.
html
<form id="myForm">
<input type="text" id="myInput" placeholder="أدخل نصاً">
<input type="submit" value="إرسال">
</form>

<script>
document.getElementById("myForm").addEventListener("submit", function(event) {
event.preventDefault(); // منع إرسال النموذج
alert("تم إرسال النموذج");
});
</script>

الدرس 4: تمرير المعلومات إلى الوظائف

  • المفهوم: يمكنك تمرير معلومات حول الحدث إلى الوظائف باستخدام event كوسيط.
html
<button id="myButton">اضغط هنا</button>

<script>
document.getElementById("myButton").addEventListener("click", function(event) {
console.log(event); // طباعة تفاصيل الحدث
alert("تم النقر على الزر!");
});
</script>

الدرس 5: استخدام this في التعامل مع الأحداث

  • المفهوم: داخل دالة الحدث، يمكن استخدام this للإشارة إلى العنصر الذي وقع عليه الحدث.
html
<button id="myButton">اضغط هنا</button>

<script>
document.getElementById("myButton").addEventListener("click", function() {
this.style.backgroundColor = "blue"; // تغيير لون الزر عند النقر
});
</script>

الدرس 6: إلغاء الحدث (Event Propagation)

  • المفهوم: عند وقوع الحدث، يتم تنفيذ الوظائف المربوطة به. ولكن يمكن أن يتسبب الحدث في “انتشاره” إلى العناصر الأب (Event Bubbling) أو أن يتم تداوله في الاتجاه المعاكس (Event Capturing).
1. إيقاف الانتشار باستخدام stopPropagation()
  • يمكنك إيقاف انتشار الحدث إلى العناصر الأب باستخدام stopPropagation().
html
<div id="parent">
<button id="child">اضغط هنا</button>
</div>

<script>
document.getElementById("parent").addEventListener("click", function() {
alert("تم النقر على العنصر الأب");
});

document.getElementById("child").addEventListener("click", function(event) {
event.stopPropagation(); // إيقاف الانتشار
alert("تم النقر على العنصر الأبناء");
});
</script>

2. إلغاء التصرف الافتراضي باستخدام preventDefault()
  • تستخدم هذه الطريقة لإلغاء التصرف الافتراضي للحدث، مثل إرسال نموذج أو فتح رابط.
html
<form id="myForm">
<input type="submit" value="إرسال">
</form>

<script>
document.getElementById("myForm").addEventListener("submit", function(event) {
event.preventDefault(); // إلغاء التصرف الافتراضي (إرسال النموذج)
alert("تم إلغاء إرسال النموذج");
});
</script>

الدرس 7: التعامل مع الأحداث المخصصة (Custom Events)

  • المفهوم: يمكنك إنشاء أحداث مخصصة واستخدامها في تطبيقاتك.
html
<button id="triggerEvent">افتح الحدث المخصص</button>

<script>
let event = new Event('myCustomEvent'); // إنشاء حدث مخصص

document.getElementById("triggerEvent").addEventListener('myCustomEvent', function() {
alert("تم تفعيل الحدث المخصص!");
});

document.getElementById("triggerEvent").addEventListener("click", function() {
this.dispatchEvent(event); // تفعيل الحدث المخصص عند النقر
});
</script>

الدرس 8: تلخيص الوحدة

  • الأحداث: هي تفاعلات تحدث عندما ينفذ المستخدم عملًا معينًا مثل النقر أو الكتابة.
  • ربط الأحداث: يمكن ربط الأحداث باستخدام onclick أو addEventListener().
  • أنواع الأحداث: تشمل أحداث الفأرة، لوحة المفاتيح، النماذج، وغيرها.
  • إلغاء التصرف الافتراضي: يمكنك إلغاء التصرف الافتراضي للحدث باستخدام preventDefault() و stopPropagation().
  • استخدام this: داخل دوال الأحداث، يمكن استخدام this للإشارة إلى العنصر المستهدف.

المشاريع العملية للوحدة 7:

  • مشروع 1: بناء نموذج يحتوي على عدة حقول إدخال، وعند التغيير في أي حقل، يتم طباعة النص في الحقل في وحدة التحكم.
  • مشروع 2: بناء تطبيق يحتوي على زر يعرض رسالة تحية عند النقر عليه، ويغير لونه باستخدام الأحداث.
  • مشروع 3: تصميم صفحة تحتوي على أزرار متعددة، وعند النقر على كل زر، يتم إظهار رسالة خاصة به باستخدام addEventListener().
    ahmed nabel

    Similar Posts

    اترك تعليقاً

    لن يتم نشر عنوان بريدك الإلكتروني. الحقول الإلزامية مشار إليها بـ *