Интерфейсные события

Основы событий мыши

Мышь остаётся главным инструментом взаимодействия с интерфейсами. Самые распространённые события:

• click — клик по элементу;
• dblclick — двойной клик;
• contextmenu — клик правой кнопкой;
• mousedown / mouseup — нажатие и отпускание кнопки;
• mousemove — любое движение мыши.

Пример:

<button id="btn">Кликни меня</button>
<script>
  const btn = document.getElementById("btn");
  btn.addEventListener("click", () => {
    alert("Ты кликнул кнопку!");
  });
</script>

Движение мыши: mouseover/out и mouseenter/leave

Частая задача — отслеживать, когда мышь заходит или выходит из элемента.

• mouseover / mouseout — срабатывают при входе/выходе с элемента и его потомков.
• mouseenter / mouseleave — похожи, но не всплывают и реагируют только на сам элемент.
  

Пример:

<div id="box" style="width:150px;height:150px;background:lightblue;">
  Наведи мышь
</div>
<script>
  const box = document.getElementById("box");

  box.addEventListener("mouseenter", () => {
    box.style.background = "lightgreen";
  });

  box.addEventListener("mouseleave", () => {
    box.style.background = "lightblue";
  });
</script>

Drag'n'Drop с событиями мыши

Перетаскивание объектов реализуется с помощью комбинации событий mousedown, mousemove и mouseup.

Пример простого drag’n’drop:

<div id="drag" style="width:100px;height:100px;background:tomato;position:absolute;cursor:grab;">
  Перетащи меня
</div>
<script>
  const drag = document.getElementById("drag");

  drag.addEventListener("mousedown", (event) => {
    let shiftX = event.clientX - drag.getBoundingClientRect().left;
    let shiftY = event.clientY - drag.getBoundingClientRect().top;

    function moveAt(pageX, pageY) {
      drag.style.left = pageX - shiftX + "px";
      drag.style.top = pageY - shiftY + "px";
    }

    function onMouseMove(event) {
      moveAt(event.pageX, event.pageY);
    }

    document.addEventListener("mousemove", onMouseMove);

    drag.addEventListener("mouseup", () => {
      document.removeEventListener("mousemove", onMouseMove);
    }, { once: true });
  });
</script>

Клавиатура: keydown и keyup

События клавиатуры помогают реагировать на ввод:

• keydown — клавиша нажата;
• keyup — клавиша отпущена.
  

<input id="inp" placeholder="Печатай тут" />
<script>
  const inp = document.getElementById("inp");

  inp.addEventListener("keydown", (e) => {
    console.log("Нажата:", e.key);
  });

  inp.addEventListener("keyup", (e) => {
    console.log("Отпущена:", e.key);
  });
</script>

События указателя

Сейчас многие устройства используют сенсорные экраны, поэтому кроме мышиных событий существуют pointer events. Они объединяют мышь, стилус и пальцы.

Основные:

• pointerdown — аналог mousedown;
• pointerup — аналог mouseup;
• pointermove — аналог mousemove;
• pointerenter / pointerleave — аналог событий наведения.
  

Пример:

<div id="pad" style="width:200px;height:200px;background:beige;">
  Касайся или двигай указатель
</div>
<script>
  const pad = document.getElementById("pad");

  pad.addEventListener("pointermove", (e) => {
    pad.textContent = `x: ${e.clientX}, y: ${e.clientY}`;
  });
</script>

Прокрутка

Событие scroll возникает, когда пользователь прокручивает страницу или элемент с прокруткой.

Пример «липкой» кнопки «Наверх»:

<button id="toTop" style="position:fixed;bottom:20px;right:20px;display:none;">
  ↑ Наверх
</button>
<script>
  const toTop = document.getElementById("toTop");

  window.addEventListener("scroll", () => {
    if (window.scrollY > 200) {
      toTop.style.display = "block";
    } else {
      toTop.style.display = "none";
    }
  });

  toTop.addEventListener("click", () => {
    window.scrollTo({ top: 0, behavior: "smooth" });
  });
</script>