Sertifikat olingYANGIW3Schools ilovasiiOS va AndroidSarguzashtni boshlang

Sichqoncha hodisalari

Sichqoncha hodisalari foydalanuvchi sichqoncha bilan aloqa qilganda sodir bo‘ladi.

Common Mouse Events:

  • click
  • dblclick
  • mouseover / mouseout
  • mousemove
  • mousedown / mouseup
Sichqoncha hodisalari interaktiv veb-sahifalar va ilovalarni yaratish, sichqonchani bosish, aylantirish va harakatlar kabi foydalanuvchi harakatlariga javoban muayyan funksiyalarni ishga tushirish uchun juda muhimdir.

Mouseover va Mouseout

Misol

<div id="box" style="width:200px;height:100px;padding:16px;border:1px solid #000;">
Move mouse over this box
</div>

<script>
const box = document.getElementById("box");

// Let box listen for mouseover
box.addEventListener("mouseover", function () {
  box.innerHTML = "Mouse is over me!";
});

// Let box listen for mouseout
box.addEventListener("mouseout", function () {
  box.innerHTML = "Mouse is out!";
});
</script>
O‘zingiz sinab ko‘ring »
ULASHISH

Keng tarqalgan sichqoncha hodisalari

  • click
    Asosiy sichqoncha tugmasi (odatda chap tugma) bilan bitta elementda mousedown va mouseup hodisalari sodir bo‘lgandan keyin ishga tushadi.

  • dblclick
    Bitta elementda ketma-ket ikki marta tez bosilgandan keyin ishga tushadi.

  • mousedown / mouseup
    Bu hodisalar element ustida sichqoncha tugmasi mos ravishda bosilganda (mousedown) yoki qo‘yib yuborilganda (mouseup) ishga tushadi.

  • mousemove
    Sichqoncha ko‘rsatkichi element ustida harakatlanayotganda uzluksiz ishga tushadi va kursorning joylashuvi (koordinatalari) haqida ma’lumot beradi.

  • mouseover
    Ko‘rsatkich element (yoki uning bola elementlaridan biri) ustiga kelganda ishga tushadi.

  • sichqoncha ko‘rsatkichi elementni tark etganda ishga tushadi.
  • mouseenter sichqonchani siljitishga o‘xshaydi, lekin ko‘rsatgich uning avlodlariga emas, balki elementga kirganda ishga tushadi, bu esa CSS: hover harakati kabi foydalanish holatlari uchun yanada oqilona bo‘ladi.
  • mouseleave Sichqoncha ko‘chishiga o‘xshaydi, lekin ko‘rsatgich uning avlodlarini emas, balki elementni tark etganda ishga tushadi, bu CSS: hover harakati kabi foydalanish holatlari uchun yanada oqilona bo‘ladi.
  • kontekst menyusi Foydalanuvchi odatda sichqonchaning o‘ng tugmasini bosish orqali kontekst menyusini ochishga harakat qilganda ishga tushadi.
  • g‘ildirak Sichqoncha g‘ildiragi aylantirilganda ishga tushadi, odatda aylantirish yoki kattalashtirish funksiyasi uchun ishlatiladi.

  • drag hodisalari
    Drag-and-drop (sudrab tashlash) interfeyslarini yaratishda ishlatiladigan hodisalar turkumi (dragstart, dragend, dragover va h.k.).

Sichqoncha joylashuvi

MouseEvent interfeysi ko‘rsatgich koordinatalari, sichqonchaning qaysi tugmasi bosilishi va boshqalar kabi foydali xususiyatlarni o‘z ichiga olgan voqea obyektini taqdim etadi.

Misol

Using event.clientX and event.clientY

<p id="demo">Move the mouse in this window!</p>

<script>
// Let document listen for mousemove
document.addEventListener("mousemove", function (event) {
  document.getElementById("demo").innerHTML =
  "X: " + event.clientX + " Y: " + event.clientY;
});
</script>
O‘zingiz sinab ko‘ring »

A Sensorli va qalamni o‘z ichiga olgan zamonaviy, qurilmadan mustaqil kirishni boshqarish uchun ishlab chiquvchilar ko‘pincha yangiroq Pointer Events API-dan foydalanadilar.


‹ OrqagaKeyingisi

W3Schools Pathfinder

Yutuqlaringizni kuzating – bu bepul!

Ro'yxatdan o'tishKirish