JavaScript hodisalari

HTML hodisalari

HTML hodisalari — bu HTML elementlarida sodir bo'ladigan narsalar.

Hodisalarga misollar:

• HTML tugmasi bosildi
• Veb-sahifa yuklanishi tugadi
• Sichqoncha element ustiga keldi
• Klaviatura tugmasi bosildi
• HTML kirish maydoni o'zgartirildi

HTML DOM JavaScript-ga HTML hodisalariga javob berishga imkon beradi.

---

JavaScript hodisalari

Ko'pincha, hodisalar sodir bo'lganda, siz biror narsa qilishni xohlaysiz. JavaScript HTML sahifalarida ishlatilganda, JavaScript hodisalarga javob bera oladi.

JavaScript hodisalar aniqlanganda kodni bajarishga imkon beradi. HTML elementlariga JavaScript kodi bilan hodisa ishlovchi atributlarini qo'shishga ruxsat beradi.

<element event="biror JavaScript kodi">
  <!-- yoki -->
  <element event="biror JavaScript kodi"></element
></element>

Misol: onclick atributi

<button onclick="document.getElementById('demo').innerHTML = Date()">
  Vaqt nechada?
</button>

Yuqoridagi misolda JavaScript kodi id="demo" bo'lgan elementning mazmunini o'zgartiradi.

Keyingi misolda kod this.innerHTML yordamida o'z elementining mazmunini o'zgartiradi:

<button onclick="this.innerHTML = Date()">Vaqt nechada?</button>

---

JavaScript funksiyasini chaqirish

JavaScript kodi ko'pincha bir necha qator uzunlikda bo'lishi mumkin. Funksiyalarni chaqirish uchun hodisa atributidan foydalanish ko'proq tarqalgan:

<button onclick="displayDate()">Vaqt nechada?</button>

<script>
  function displayDate() {
    document.getElementById('demo').innerHTML = Date()
  }
</script>

---

Umumiy HTML hodisalari

Mana ba'zi keng tarqalgan HTML hodisalari ro'yxati:

Hodisa	Tavsif
onchange	HTML elementi o'zgartirildi
onclick	Foydalanuvchi HTML elementini bosdi
onmouseover	Foydalanuvchi sichqonchani element ustiga olib keldi
onmouseout	Foydalanuvchi sichqonchani elementdan uzoqlashtirdi
onkeydown	Foydalanuvchi klaviatura tugmasini bosdi
onload	Brauzer sahifani yuklashni tugatdi

Ro'yxat ancha uzun: W3Schools JavaScript Reference HTML DOM Events.

---

JavaScript hodisa ishlovchilari (Event Handlers)

Hodisa ishlovchisi — bu hodisa sodir bo'lganda ishlaydigan JavaScript kodi. Ular foydalanuvchi kiritishini, harakatlarini va brauzer harakatlarini boshqarish va tekshirish uchun ishlatilishi mumkin:

• Sahifa yuklangan har safar bajarilishi kerak bo'lgan ishlar
• Sahifa yopilganda bajarilishi kerak bo'lgan ishlar
• Foydalanuvchi tugmani bosganda bajarilishi kerak bo'lgan harakat
• Foydalanuvchi ma'lumot kiritganda tekshirilishi kerak bo'lgan mazmun
• Va boshqalar...

---

Hodisa tinglovchisidan (Event Listener) foydalanish

onclick kabi hodisa atributlaridan foydalanish oson. Shunga qaramay, hodisalarni boshqarishning tavsiya etilgan usuli addEventListener() dan foydalanishdir.

Tavsiya etilmaydi (Eski usul)

<button onclick="displayDate()">Vaqt?</button>
<p id="demo"></p>

<script>
  function displayDate() {
    document.getElementById('demo').innerHTML = Date()
  }
</script>

Tavsiya etiladi (Zamonaviy usul)

addEventListener() metodi HTML va JavaScript-ni bir-biridan ajratib turadi.

<button id="myBtn">Meni bos</button>
<p id="demo"></p>

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

  btn.addEventListener('click', function () {
    document.getElementById('demo').innerHTML = Date()
  })
</script>

Eslatma

HTML DOM boblarida hodisalar va hodisa ishlovchilari haqida ko'proq ma'lumotga ega bo'lasiz.