ما وظيفة الدالة addEventListener و preventDefault

إن ال addEventListener هي دالة تستخدم في JavaScript لربط مستمع (listener) بحدث معين (event) على عنصر من العناصر الموجودة في صفحة HTML.

فعندما يحدث هذا الحدث مثل النقر على زر أو التمرير أو إدخال نص أو إرسال نموذج form أو غيرها من الأحداث فإنه يتم تنفيذ دالة معينة .

element.addEventListener(event, function);

فالسطر السابق هو طريقة إستخدام الدالة حيث :

• element: هو العنصر الذي نريد ربط الحدث به مثل زر أو div أو أى عنصر أخر.
• event: وهو إسم الحدث الذي نريد الإستماع إليه مثل "click أو "keydown" وغيرها من الأحداث .
• function: وهي الدالة التي نريد تنفيذها عند حدوث هذا الحدث.

مثال :

const button = document.querySelector('#myButton');

// إضافة مستمع للحدث "click"
button.addEventListener('click', function(event) {
    alert('تم النقر على الزر');
});

في المثال السابق عند النقر على الزر الذي يحمل المعرف myButton سيظهر تنبيه (alert) يحتوي على الرسالة "تم النقر على الزر".

إذا لو أردنا تتبع المستخدم وتنفيذ دوال بناء على ما يقوم به في الصفحة يمكننا إستخدام الدالة  addEventListener لتحقيق ذلك.

أما preventDefault فهي دالة تستخدم داخل معالج الحدث (event handler) أى الدالة التي يتم تنفيذها عن حدوث الحدث.وذلك لمنع السلوك الافتراضي للحدث. فلكل حدث في المتصفح سلوك افتراضي مثلا عند إرسال نموذج form عند النقر على زر الإرسال يتم إعادة تحميل الصفحة  و مثلا عند الضغط على رابط (عنصر a) يتم تلقائيا الذهاب إلى هذا الرابط . وباستخدام preventDefault يمكننا إلغاء هذا السلوك الافتراضي تماما.

فمثلا لو أردت إرسال النموذج form من خلال ajax أو أردت تطبيق تحقق (validation) من البيانات قبل إرسالها يجب عليك أولا إلغاء السلوك الإفتراضي للنموذج form حتى لا يتم إرسال النموذج وإعادة تحميل الصفحة تلقائيا وهذا يتم من خلال الدالة preventDefault هكذا :

const form = document.querySelector('#myForm');

// إضافة مستمع للحدث "submit"
form.addEventListener('submit', function(event) {
    event.preventDefault(); // منع إرسال النموذج
    console.log('تم منع إرسال النموذج!');
    // يمكنك هنا إضافة منطق مخصص، مثل التحقق من البيانات
});

ففي المثال السابق عند الضغط على زر submit لإرسال النموذج سيتم إيقاف السلوك الإفتراضي وهو إرسال النموذج من خلال event.preventDefault وهكذا يمكنك تطبيق المنطق الذي تريده سواء التحقق من البيانات أو إرسالها بنفسك أو أى شئ أخر.

ومثلا لو أردنا عند الضغط على رابط (عنصر a) عدم الذهاب إلى هذا الرابط وتنفيذ أمر ما قبل الذهاب إليه هنا يجب أيضا أن نوقف السلوك الإفتراضي هكذا :

const link = document.querySelector('a');

link.addEventListener('click', function(event) {
    event.preventDefault(); // منع فتح الرابط
    console.log('تم النقر على الرابط، لكن لن يتم فتحه!');
});

ويمكنك الإطلاع على المزيد من خلال التالي :

addEventListener

هي دالة تُستخدم في JavaScript لربط حدث (Event) بعنصر معين في صفحة الـ HTML، بحيث يتم تنفيذ كود معين عند وقوع هذا الحدث. الحدث يمكن أن يكون نقرة زر، تحريك الفأرة، إدخال نص، أو أي تفاعل آخر مع الصفحة.

• تُستخدم لإضافة مُستمع (Listener) للحدث على عنصر معين (مثل زر أو نموذج).
• تتيح لك تحديد نوع الحدث (مثل click، mouseover، submit) والدالة التي ستُنفّذ عند وقوع الحدث.
• يمكن إضافة أكثر من مستمع لنفس العنصر دون التأثير على المستمعين الآخرين.

<button id="myButton">اضغط هنا</button>

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

preventDefault

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

• تُستخدم لإيقاف السلوك الافتراضي لعنصر معين عند وقوع حدث.
• تُستخدم غالبًا مع النماذج (Forms)، الروابط (Links)، أو الأحداث التي تؤدي إلى إجراءات افتراضية في المتصفح.
• لا تمنع الحدث نفسه من الحدوث، بل تمنع فقط الإجراء الافتراضي المرتبط به.

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

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