DOM Events

الأحداث هي ما يجعل صفحات الويب تفاعلية.
مثال: عند الضغط على زر – الكتابة في حقل – تمرير الماوس – إلخ…

🟦 ما هو الـ Event؟

هو شيء يحدث في الصفحة، مثل:

نوع الحدثماذا يعني؟
clickعند الضغط على عنصر
inputعند الكتابة في input
submitعند إرسال نموذج
mouseoverعند مرور الماوس فوق عنصر
keydownعند ضغط زر في الكيبورد
loadعند تحميل الصفحة أو الصورة
🟦 كيف نستخدم الأحداث؟
✅ الطريقة الأساسية: addEventListener
element.addEventListener("eventName", function);
JavaScript
<button id="myBtn">اضغط هنا</button>
JavaScript
const btn = document.getElementById("myBtn");

btn.addEventListener("click", function () {
  alert("تم الضغط على الزر!");
});
JavaScript
🟦 أهم أنواع الأحداث واستخداماتها
✅ 1. click — الضغط على زر أو عنصر:
document.getElementById("myBtn").addEventListener("click", () => {
  console.log("تم الضغط");
});
JavaScript

✅ 2. input — الكتابة داخل حقل إدخال:

<input type="text" id="username" />

//////////////////

document.getElementById("username").addEventListener("input", function () {
  console.log("البيانات: ", this.value);
});
JavaScript

✅ 3. submit — عند إرسال نموذج:

<form id="myForm">
  <input type="text" />
  <button type="submit">إرسال</button>
</form>

//////////////////////

document.getElementById("myForm").addEventListener("submit", function (e) {
  e.preventDefault(); // يمنع إرسال النموذج
  console.log("تم الضغط على إرسال النموذج");
});
JavaScript

✅ 4. keydown / keyup — عند ضغط أو رفع زر من لوحة المفاتيح:

document.addEventListener("keydown", function (e) {
  console.log("تم ضغط الزر:", e.key);
});
JavaScript
✅ 5. mouseover / mouseout — عند المرور أو الخروج من عنصر:
document.getElementById("myBtn").addEventListener("mouseover", () => {
  console.log("تم المرور بالماوس");
});
JavaScript
🟩 استخدام الدالة خارج addEventListener

يمكنك كتابة الدالة خارجًا:

function sayHi() {
  alert("مرحبا!");
}

btn.addEventListener("click", sayHi);
JavaScript
🟨 معلومات إضافية مهمة:
📌 event (أو e): هو كائن يمثل الحدث نفسه.
btn.addEventListener("click", function (e) {
  console.log(e.target); // العنصر الذي تم الضغط عليه
});
JavaScript

📌 إلغاء الحدث الافتراضي:

مثل منع النموذج من الإرسال:

form.addEventListener("submit", function (e) {
  e.preventDefault();
});
JavaScript

📌 إزالة الحدث:

btn.removeEventListener("click", sayHi);
JavaScript
✅ مثال عملي شامل:
<button id="themeBtn">غيّر الخلفية</button>

const btn = document.getElementById("themeBtn");

btn.addEventListener("click", () => {
  document.body.style.backgroundColor = "lightblue";
});
JavaScript
✅ ملخص سريع:
نوع الحدثوصفه
clickعند الضغط على زر
inputعند تغيير قيمة input
submitعند إرسال النموذج
keydownعند الضغط على زر في الكيبورد
mouseoverعند مرور المؤشر فوق عنصر
الوظيفةالكود
إضافة حدثelement.addEventListener("event", function)
منع التصرف الافتراضيe.preventDefault()
الوصول للعنصر المضغوطe.target
🟦 أولًا: أحداث الفأرة (Mouse Events)
الحدثالوصف
clickعند النقر (ضغط وإفلات)
dblclickعند النقر مرتين بسرعة
mousedownعند الضغط على الزر (قبل الإفلات)
mouseupعند الإفلات بعد الضغط
mouseoverعند دخول الماوس على العنصر
mouseoutعند خروج الماوس من العنصر
mousemoveعند تحريك الماوس فوق العنصر
contextmenuعند الضغط بزر الفأرة الأيمن
🟦 ثانيًا: أحداث لوحة المفاتيح (Keyboard Events)
الحدثالوصف
keydownعند الضغط على زر في الكيبورد
keyupعند إفلات الزر
keypress(قديم) عند الضغط على مفتاح نصي (تم استبداله بـ keydown)
🟦 ثالثًا: أحداث الإدخال (Input & Form Events)
الحدثالوصف
inputعند تغيير قيمة الحقل
changeعند تغيير القيمة ثم فقدان التركيز (blur)
focusعند التركيز على حقل
blurعند فقدان التركيز من حقل
submitعند إرسال النموذج
resetعند إعادة تعيين النموذج
🟦 رابعًا: أحداث تحميل الصفحة والعناصر (Page Events)
الحدثالوصف
loadعند تحميل الصفحة أو الصورة أو السكربت
DOMContentLoadedعند انتهاء تحميل الـ DOM فقط (قبل الصور)
beforeunloadقبل مغادرة المستخدم الصفحة
unloadعند مغادرة الصفحة (نادراً ما يُستخدم الآن)
errorعند حدوث خطأ في تحميل صورة أو ملف
🟦 خامسًا: أحداث اللمس (Touch Events) [على الهواتف]
الحدثالوصف
touchstartعند لمس الشاشة
touchmoveعند تمرير الإصبع على الشاشة
touchendعند رفع الإصبع
🟦 سادسًا: أحداث تخص عناصر الوسائط (Media Events)
الحدثالوصف
playعند تشغيل الفيديو
pauseعند توقيف الفيديو مؤقتًا
endedعند انتهاء تشغيل الفيديو
volumechangeعند تغيير الصوت
timeupdateعند تغيّر وقت التشغيل
seeking / seekedعند القفز إلى وقت معين
🟦 سابعًا: أحداث تخص العناصر نفسها
الحدثالوصف
scrollعند تمرير الصفحة أو عنصر فيه سكرول
resizeعند تغيير حجم النافذة
animationstart / endعند بدء/انتهاء أنيميشن CSS
transitionendعند انتهاء انتقال CSS
window.addEventListener("load", () => {
  console.log("تم تحميل الصفحة بالكامل");
});

window.addEventListener("scroll", () => {
  console.log("تم التمرير في الصفحة");
});

window.addEventListener("scroll", () => {
  console.log("scrollY:", window.scrollY);
});

document.addEventListener("keydown", (e) => {
  console.log("زر تم ضغطه: ", e.key);
});

const input = document.getElementById("myInput");
input.addEventListener("focus", () => {
  console.log("تم التركيز على الحقل");
});
JavaScript

✅ DOM Events مع Form Validation (التحقق من صحة البيانات)

<form id="myForm">
  <label>اسم المستخدم:</label>
  <input type="text" id="username" />
  <br /><br />

  <label>البريد الإلكتروني:</label>
  <input type="email" id="email" />
  <br /><br />

  <button type="submit">إرسال</button>

  <p id="error" style="color: red;"></p>
</form>
JavaScript
const form = document.getElementById("myForm");
const username = document.getElementById("username");
const email = document.getElementById("email");
const errorMsg = document.getElementById("error");

form.addEventListener("submit", function (e) {
  e.preventDefault(); // منع إرسال النموذج مؤقتًا

  // مسح الرسائل القديمة
  errorMsg.textContent = "";

  // التحقق من الحقول
  if (username.value.trim() === "") {
    errorMsg.textContent = "الرجاء إدخال اسم المستخدم.";
    return;
  }

  if (!validateEmail(email.value)) {
    errorMsg.textContent = "البريد الإلكتروني غير صحيح.";
    return;
  }

  // إذا وصلت هنا، البيانات صحيحة
  alert("تم إرسال النموذج بنجاح!");
  form.reset(); // إعادة تعيين النموذج
});

// دالة للتحقق من البريد
function validateEmail(email) {
  return /^[^\s@]+@[^\s@]+\.[^\s@]+$/.test(email);
}
JavaScript
✅ شرح الكود:
السطرالشرح
addEventListener("submit")يراقب عند الضغط على “إرسال”
e.preventDefault()يمنع الإرسال الفوري للنموذج
trim()يحذف الفراغات من بداية ونهاية النص
validateEmail()دالة للتحقق من أن البريد شكله صحيح باستخدام Regular Expression
form.reset()إعادة تعيين القيم بعد النجاح

🟦 تحسين إضافي: التحقق الفوري مع input

username.addEventListener("input", () => {
  if (username.value.trim() !== "") {
    errorMsg.textContent = "";
  }
});
JavaScript