JavaScript sichqoncha hodisalari

Sichqoncha hodisalari foydalanuvchi sichqoncha bilan o'zaro aloqada bo'lganda sodir bo'ladi.

Keng tarqalgan sichqoncha hodisalari:

• click
• dblclick
• mouseover / mouseout
• mousemove
• mousedown / mouseup

Eslatma

Sichqoncha hodisalari interaktiv veb-sahifalar va ilovalar yaratish, foydalanuvchi harakatlariga (bosish, aylantirish, harakatlantirish) javoban maxsus funksiyalarni ishga tushirish uchun juda muhimdir.

---

Mouseover va Mouseout

<div
  id="box"
  style="width:200px;height:100px;padding:16px;border:1px solid #000;"
>
  Sichqonchani ushbu quti ustiga keltiring
</div>

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

  // box uchun mouseover (ustiga kelish) hodisasini tinglash
  box.addEventListener('mouseover', function () {
    box.innerHTML = 'Sichqoncha men ustimda!'
  })

  // box uchun mouseout (tark etish) hodisasini tinglash
  box.addEventListener('mouseout', function () {
    box.innerHTML = 'Sichqoncha chiqib ketdi!'
  })
</script>

---

Umumiy sichqoncha hodisalari

• click - Bitta elementda asosiy sichqoncha tugmasi (odatda chap) bilan ham mousedown, ham mouseup hodisalari sodir bo'lgandan keyin ishga tushadi.
• dblclick - Bir xil elementda ikki marta tezlik bilan bosilganda ishga tushadi.
• mousedown / mouseup - Sichqoncha tugmasi bosilganda (mousedown) yoki qo'yib yuborilganda (mouseup) ishga tushadi.
• mousemove - Sichqoncha ko'rsatkichi element ustida harakatlanayotganda doimiy ravishda ishga tushadi va kursorning koordinatalari haqida ma'lumot beradi.
• mouseover - Ko'rsatkich element (yoki uning farzandlaridan biri) ustiga kelganda ishga tushadi.
• mouseout - Ko'rsatkich elementni tark etganda ishga tushadi.
• mouseenter - mouseoverga o'xshash, lekin ko'rsatkich element farzandlariga emas, aynan elementga kirganda ishga tushadi (CSS :hover kabi).
• mouseleave - mouseoutga o'xshash, lekin ko'rsatkich element farzandlaridan emas, aynan elementdan chiqqanda ishga tushadi.
• contextmenu - Foydalanuvchi kontekst menyusini ochishga harakat qilganda (odatda o'ng tugmani bosish orqali) ishga tushadi.
• wheel - Sichqoncha g'ildiragi aylantirilganda ishga tushadi, odatda aylantirish (scroll) yoki masshtablash (zoom) uchun ishlatiladi.
• drag events - Drag-and-drop interfeyslarini yaratish uchun ishlatiladigan hodisalar turkumi (dragstart, dragend, dragover va h.k.).

---

Sichqoncha o'rni (Mouse Position)

MouseEvent interfeysi ko'rsatkich koordinatalari, qaysi tugma bosilganligi va boshqa foydali xususiyatlarni o'z ichiga olgan hodisa obyektini (event object) taqdim etadi.

Misol: clientX va clientY dan foydalanish

<p id="demo">Sichqonchani ushbu oyna ichida harakatlantiring!</p>

<script>
  // Hujjat uchun mousemove hodisasini tinglash
  document.addEventListener('mousemove', function (event) {
    document.getElementById('demo').innerHTML =
      'X: ' + event.clientX + ' Y: ' + event.clientY
  })
</script>

Eslatma

Sensorli ekranlar va qalam kabi qurilmalarni o'z ichiga olgan zamonaviy, qurilmaga bog'liq bo'lmagan kirishlarni boshqarish uchun dasturchilar ko'pincha yangi Pointer Events API dan foydalanadilar.