event.stopPropagation مقابل event.preventDefault () مقابل إرجاع false في أحداث DOM

أشعر أنني مرتبك دائمًا بشيء واحد عندما يتعلق الأمر بمعالجة أحداث DOM في JavaScript.

متى يجب علي الاتصالstopPropagation()على كائن الحدث؟ متى يجب علي الاتصالpreventDefault()على كائن الحدث؟ هل علي أنreturn false؟

Event.stopPropagation

افترض أنني أريد التعامل مع حدث نقرة على عنصر.

بشكل افتراضي ، يتم تشغيل حدث على عنصر DOM على العنصر المحدد الذي تم النقر عليه (على سبيل المثال ، زر) وسيتم نشره لجميع عناصر شجرة العناصر الأصلية ، ما لم يتم إيقافه.

أريد التأكد من التعامل مع الحدث في معالج الأحداث الخاص بي ، وسوف "يتوقف" عند هذا الحد.

يمكنك إيقاف التكاثر عن طريق الاتصالstopPropagation()طريقةEventالكائن ، عادةً في نهاية معالج الحدث:

const link = document.getElementById('my-link')
link.addEventListener('mousedown', event => {
  // process the event
  // ...

  event.stopPropagation()
})

Event.preventDefault

استدعاءpreventDefault()طريقة كائن الحدث ستلغي المعالجة الافتراضية التي تمت برمجة المتصفح لتنفيذه.

فتح صفحة جديدة على ملفaجزءclickحدث ، على سبيل المثال.

أو تقديم أformعلى الsubmitحدث.

الاتصالpreventDefault()هو ما عليك القيام به لتخصيص الإجراء بالكامل. ربما من خلال إنشاء ملفfetchطلب تحميل بعض JSON بدلاً من فتح صفحة جديدة عند النقر على الرابط.

سيتم تنفيذ معالجات الأحداث الأخرى المحددة في نفس العنصر. ما لم تتصلevent.stopImmediatePropagation().

عودةfalse

هذا محير بشكل خاص لمطوري jQuery السابقين (أو الحاليين). في jQuery ، يعودfalseمن معالج حدث يتم استدعاؤه تلقائيًاEvent.preventDefaultوEvent.stopPropagationلنا.

في Vanilla JavaScript ،return falseفي معالج الحدثولا شيء.


المزيد من دروس js: