JavaScript HTML DOM hodisalari

Hodisalarga javob berish

JavaScript HTML elementida click (bosish) kabi hodisa sodir bo'lganda bajarilishi mumkin.

Foydalanuvchi elementni bosganda kodni bajarish uchun HTML hodisa atributiga JavaScript kodini qo'shing:

onclick=JavaScript

HTML hodisalariga misollar:

• Foydalanuvchi sichqonchani bosganda
• Veb-sahifa yuklanganda
• Rasm yuklanganda
• Sichqoncha element ustiga kelganda
• Kirish maydoni o'zgartirilganda
• HTML formasi yuborilganda
• Foydalanuvchi tugmani bosganda

Ushbu misolda foydalanuvchi <h1> elementini bosganda uning mazmuni o'zgaradi:

<!DOCTYPE html>
<html>
  <body>
    <h1 onclick="this.innerHTML = 'Ooops!'">Ushbu matnni bosing!</h1>
  </body>
</html>

Keyingi misolda funksiya hodisa ishlovchisidan chaqiriladi:

<!DOCTYPE html>
<html>
  <body>
    <h1 onclick="changeText(this)">Ushbu matnni bosing!</h1>

    <script>
      function changeText(id) {
        id.innerHTML = 'Ooops!'
      }
    </script>
  </body>
</html>

---

HTML hodisa atributlari

HTML elementlariga hodisalarni tayinlash uchun siz hodisa atributlaridan foydalanishingiz mumkin.

Misol: Tugmaga onclick hodisasini tayinlash

<button onclick="displayDate()">Sinab ko'ring</button>

Yuqoridagi misolda tugma bosilganda displayDate nomli funksiya bajariladi.

---

HTML DOM yordamida hodisalarni tayinlash

HTML DOM JavaScript yordamida HTML elementlariga hodisalarni tayinlashga imkon beradi:

<script>
  document.getElementById('myBtn').onclick = displayDate
</script>

Yuqoridagi misolda id="myBtn" bo'lgan HTML elementiga displayDate funksiyasi tayinlangan. Tugma bosilganda funksiya bajariladi.

---

onload va onunload hodisalari

onload va onunload hodisalari foydalanuvchi sahifaga kirganda yoki uni tark etganda ishga tushadi.

onload hodisasi tashrif buyuruvchining brauzer turi va versiyasini tekshirish hamda shu ma'lumotga asosan veb-sahifaning tegishli versiyasini yuklash uchun ishlatilishi mumkin. Shuningdek, u cookie'lar bilan ishlashda ham qo'llaniladi.

<body onload="checkCookies()"></body>

---

oninput hodisasi

oninput hodisasi foydalanuvchi ma'lumot kiritayotganda biror harakatni bajarish uchun ishlatiladi.

Pastda kiritish maydonidagi matnni kattalashtirish (upperCase()) misoli keltirilgan:

<input type="text" id="fname" oninput="upperCase()" />

---

onchange hodisasi

onchange hodisasi ko'pincha kiritish maydonlarini tekshirish (validation) bilan birga ishlatiladi. Foydalanuvchi kiritish maydoni mazmunini o'zgartirganda upperCase() funksiyasi chaqiriladi:

<input type="text" id="fname" onchange="upperCase()" />

---

onmouseover va onmouseout hodisalari

Ushbu hodisalar foydalanuvchi sichqonchani element ustiga olib kelganda yoki undan uzoqlashtirganda funksiyani ishga tushirish uchun ishlatiladi:

<div
  onmouseover="this.innerHTML='Rahmat'"
  onmouseout="this.innerHTML='Sichqonchani ustimga olib keling'"
>
  Sichqonchani ustimga olib keling
</div>

---

onmousedown, onmouseup va onclick hodisalari

onmousedown, onmouseup va onclick hodisalarining barchasi sichqonchani bosish qismlaridir.

1. Avval sichqoncha tugmasi bosilganda onmousedown hodisasi ishga tushadi.
2. Keyin tugma qo'yib yuborilganda onmouseup hodisasi ishga tushadi.
3. Nihoyat, sichqonchani bosish to'liq tugallanganda onclick hodisasi ishga tushadi.

<div
  onmousedown="mDown(this)"
  onmouseup="mUp(this)"
  style="background-color:#D94A38;width:90px;height:20px;padding:40px;"
>
  Meni bosing
</div>

<script>
  function mDown(obj) {
    obj.style.backgroundColor = '#1ec5e5'
    obj.innerHTML = "Qo'yib yuboring"
  }

  function mUp(obj) {
    obj.style.backgroundColor = '#D94A38'
    obj.innerHTML = 'Rahmat'
  }
</script>

---

HTML DOM Event obyekti ma'lumotnomasi

Barcha HTML DOM hodisalari ro'yxati uchun bizning to'liq HTML DOM Event Object Reference ma'lumotnomamizga qarang.