الدرس الثاني والعشرون: الأحداث المتقدمة (input / change / submit) في JavaScript

 في هذا الدرس سنتعرف على أحداث إضافية مهمة تساعدنا على تتبع تغير البيانات أو التفاعل الفوري مع المستخدم.

---

1. الحدث input – يتفاعل مع كل تغيير مباشر

<input type="text" id="username" placeholder="اكتب اسمك">
<p id="preview"></p>

document.getElementById("username").addEventListener("input", function() {
  let name = this.value;
  document.getElementById("preview").textContent = "أهلاً، " + name;
});

يتم تشغيل هذا الحدث مع كل حرف يكتبه المستخدم، مثالي لتحديث مباشر.

---

2. الحدث change – يتفاعل فقط بعد مغادرة الحقل

<select id="colorSelect">
  <option value="">اختر لونًا</option>
  <option value="أحمر">أحمر</option>
  <option value="أزرق">أزرق</option>
</select>
<p id="chosenColor"></p>

document.getElementById("colorSelect").addEventListener("change", function() {
  let color = this.value;
  document.getElementById("chosenColor").textContent = "اللون المختار: " + color;
});

يُستخدم غالبًا مع القوائم أو مربعات الاختيار (checkbox).

---

3. الحدث submit – عند إرسال النموذج

<form id="myForm">
  <input type="text" id="email" placeholder="أدخل بريدك">
  <button type="submit">أرسل</button>
</form>

document.getElementById("myForm").addEventListener("submit", function(e) {
  e.preventDefault();
  let email = document.getElementById("email").value;
  alert("تم إرسال البريد: " + email);
});

يستخدم للتحكم الكامل بعملية إرسال النماذج.

---

✅ مقارنة سريعة بين الأحداث:

الحدث	متى يعمل؟	الأفضل استخدامه في
input	عند كل تغيير في القيمة	الحقول النصية
change	عند الخروج من الحقل أو تغيير الخيار	القوائم / checkboxes
submit	عند إرسال النموذج	النماذج الكاملة