MohirDox

Ko'rinishi

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:

html
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:

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

Keyingi misolda funksiya hodisa ishlovchisidan chaqiriladi:

html
<!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 ​

html
<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:

html
<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.

html
<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:

html
<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:

html
<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:

html
<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.
html
<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.