JavaScript hodisalarni boshqarish

Hodisalarni boshqarish — bu hodisalarni qo'shish, olib tashlash va nazorat qilishdir.

---

Hodisalarni qo'shish

Hodisani biriktirishning eng zamonaviy usuli addEventListener() metodidan foydalanishdir.

<button id="btn">Bosish</button>
<p id="demo"></p>

<script>
  const btn = document.getElementById('btn')

  // btn uchun click hodisasini tinglash
  btn.addEventListener('click', myFunction)

  function myFunction() {
    document.getElementById('demo').innerHTML = 'Bosildi!'
  }
</script>

---

Hodisalarni olib tashlash

Biriktirilgan hodisani olib tashlash uchun removeEventListener() metodidan foydalaniladi.

<button id="add">Qo'shish</button>
<button id="remove">Olib tashlash</button>
<button id="test">Sinov bosish</button>
<p id="demo"></p>

<script>
  const test = document.getElementById('test')
  const remove = document.getElementById('remove')
  const add = document.getElementById('add')

  function myFunction() {
    document.getElementById('demo').innerHTML += 'Salom! '
  }

  // Qo'shish tugmasi bosilganda test tugmasiga hodisa biriktirish
  add.addEventListener('click', function () {
    test.addEventListener('click', myFunction)
  })

  // Olib tashlash tugmasi bosilganda test tugmasidan hodisani olib tashlash
  remove.addEventListener('click', function () {
    test.removeEventListener('click', myFunction)
  })
</script>

Muhim eslatma

Hodisa tinglovchisini olib tashlash uchun siz uni qo'shishda ishlatilgan aynan bir xil nomlangan funksiyadan foydalanishingiz kerak. Anonim funksiyalarni olib tashlab bo'lmaydi.

---

Hodisalarni to'sib qo'yish (Blocking Events)

Ba'zan brauzerning standart harakatini to'sib qo'yishga to'g'ri keladi (masalan, havolani ochishni taqiqlash).

preventDefault() dan foydalanish

Ushbu misol havolaning ochilishini bloklaydi:

<a href="https://www.google.com" id="link">Google sahifasiga o'tish</a>
<p id="demo"></p>

<script>
  const link = document.getElementById('link')

  // Havola uchun click hodisasini tinglash
  link.addEventListener('click', function (event) {
    // Standart harakatni to'xtatish (havolaga o'tmaydi)
    event.preventDefault()
    document.getElementById('demo').innerHTML = 'Havola bloklandi!'
  })
</script>