Hodisalarga kirish

Brauzerning standart harakatlari

Ko'p hodisalar avtomatik ravishda brauzerning standart harakatiga (default action) olib keladi. Masalan, havolaga bosish yangi manzilga o'tkazadi, forma tugmasi ma'lumotni yuboradi. Ba'zan bu harakatni to'xtatib, o'zimiz JavaScript bilan boshqarmoqchi bo'lamiz.

Standart harakatlar

Brauzerning standart harakatlariga misollar:

Ba'zan bu harakatlar kerak emas — biz o'z mantig'imizni ishlatmoqchimiz. Standart harakatni to'xtatish mumkin.

event.preventDefault()

Brauzer harakatini to'xtatishning asosiy usuli — hodisa obyektidagi event.preventDefault() metodini chaqirish. Masalan, havolani "harakatsiz" qilamiz:

<a href="/" onclick="event.preventDefault()">Bu yerga bosing</a>

Endi havolaga bossak, brauzer / manziliga o'tmaydi — standart harakat bekor qilinadi. addEventListener orqali ham xuddi shunday:

menuLink.addEventListener('click', function(event) {
  event.preventDefault();
  // o'rniga o'z mantig'imizni bajaramiz:
  showCustomMenu();
});
Odatda standart harakati bor hodisalar ko'tariladi (bubble). Agar biror element ustidagi ishlovchida preventDefault() chaqirilsa, standart harakat butunlay to'xtaydi — hatto ko'tarilish davomida boshqa ishlovchilar bo'lsa ham.

onclick uchun return false

HTML atributi yoki DOM xossasi (on<hodisa>) orqali biriktirilgan ishlovchida standart harakatni to'xtatishning yana bir usuli — false qaytarish:

<a href="/" onclick="return false">Bu yerga bosing</a>

<!-- yoki funksiyada: -->
<a href="/" onclick="handler()">havola</a>
<script>
  function handler() {
    alert('...');
    return false; // brauzer /  ga o'tmaydi
  }
</script>

on<hodisa> ishlovchisidan false qaytarilsa, bu event.preventDefault() chaqirilgandek ta'sir qiladi — standart harakat to'xtaydi.

return false faqat on<hodisa> (atribut yoki DOM xossasi) ishlovchilarida ishlaydi. addEventListener bilan biriktirilgan ishlovchida return falsening hech qanday ta'siri yo'q — u shunchaki e'tiborsiz qoldiriladi. addEventListenerda doim event.preventDefault() ishlating.
Ishlovchidan qaytariladigan qiymat odatda e'tiborga olinmaydi. Yagona istisno — on<hodisa> ishlovchisidan qaytarilgan false. Boshqa har qanday qiymat (jumladan true, undefined) hech narsaga ta'sir qilmaydi.

event.defaultPrevented

Standart harakat to'xtatilganini tekshirish uchun event.defaultPrevented xossasi bor. Agar preventDefault() chaqirilgan bo'lsa, u true bo'ladi:

elem.oncontextmenu = function(event) {
  event.preventDefault();
  alert('Elementning o'z menyusi');
};

Bu xossa bir hodisaga bir necha darajada ishlov berilganda foydali. Masalan, ichki element o'z kontekst menyusini ko'rsatib, standart menyuni to'xtatgan bo'lsin. Tashqi element (yoki document) buni bilib, o'z ishini o'tkazib yuborishi mumkin:

document.oncontextmenu = function(event) {
  // agar quyi darajadagi ishlovchi allaqachon preventDefault qilgan bo'lsa,
  // biz o'z menyumizni ko'rsatmaymiz
  if (event.defaultPrevented) return;

  event.preventDefault();
  alert('Hujjatning umumiy menyusi');
};
event.defaultPrevented ba'zan event.stopPropagation()ga muqobil bo'la oladi. stopPropagation() ko'tarilishni butunlay to'xtatib, boshqa ishlovchilarga "bu yerda hech narsa bo'lmagan" degandek ko'rsatadi va "o'lik zonalar" yaratishi mumkin. defaultPrevented esa hodisani to'xtatmasdan, boshqa ishlovchilarga "standart harakat allaqachon boshqa joyda qayta ishlangan" degan xabarni beradi — bu ko'pincha xavfsizroq yondashuv.

passive ishlovchilar

addEventListenerning passive: true opsiyasi brauzerga ishlovchi preventDefault()ni chaqirmasligini oldindan aytadi.

Nega bu kerak? Mobil qurilmalarda touchmove kabi hodisalar bor (barmoq ekranda harakatlanganda) — ular sahifani aylantirishga (scroll) olib keladi. Odatda brauzer aylantirishni boshlashdan avval ishlovchi preventDefault() chaqiradimi-yo'qmi, kutishi kerak. Bu kutish sahifa aylanishida sezilarli kechikish (lag) beradi.

elem.addEventListener('touchmove', function(event) {
  // aylantirishni to'xtatib bo'lmaydi (preventDefault e'tiborsiz)
}, { passive: true });

passive: true bilan brauzer bilib turadiki, aylantirish to'xtatilmaydi — shuning uchun u darhol silliq aylantiradi, ishlovchini kutmaydi. Natijada sahifa ravon ishlaydi.

Ba'zi brauzerlarda touchstart va touchmove hodisalari uchun passive standart bo'yicha true. Ya'ni bunday ishlovchida preventDefault() chaqirsangiz, u ishlamaydi (ba'zan konsolda ogohlantirish chiqadi). Agar rostdan preventDefault() kerak bo'lsa, aniq { passive: false } bering.

Muhim: qaysi hodisalar to'xtatiladi?

Standart harakati bor hodisalarni to'xtatish mumkin, lekin hodisaning o'zi baribir sodir bo'ladi. Masalan, havolaga bosganda click hodisasi ishlaydi, biz faqat navigatsiyani (o'tishni) to'xtatamiz.

Standart harakatni to'xtatib, o'rniga o'z mantig'ini qo'yish — juda keng tarqalgan. Masalan, JavaScript bilan boshqariladigan formalar (AJAX orqali yuborish), o'z navigatsiya tizimlari, maxsus kontekst menyular — barchasi preventDefault()ga tayanadi.

Xulosa