События клавиатуры и мыши

Preact предоставляет эффективный и лёгкий способ обработки событий в компонентах, сохраняя синтаксис, близкий к React. Управление событиями включает привязку функций-обработчиков к элементам и правильную работу с объектами событий.

Обработка событий мыши

События мыши включают клики, наведение, отпускание кнопки и движение мыши. В Preact их обработка аналогична стандартным DOM-событиям, но с учётом синтетической оболочки Preact.

Основные события мыши:

  • onClick — щелчок мыши.
  • onDoubleClick — двойной щелчок.
  • onMouseDown / onMouseUp — нажатие и отпускание кнопки.
  • onMouseEnter / onMouseLeave — наведение и уход с элемента.
  • onMouseMove — движение курсора по элементу.

Пример:

import { h } from 'preact';
import { useState } from 'preact/hooks';

function MouseTracker() {
  const [coords, setCoords] = useState({ x: 0, y: 0 });

  const handleMouseMove = (event) => {
    setCoords({ x: event.clientX, y: event.clientY });
  };

  return (
    <div
      style={{ width: '300px', height: '300px', border: '1px solid black' }}
      onMouseM ove={handleMouseMove}
    >
      Координаты: {coords.x}, {coords.y}
    </div>
  );
}

Особенности:

  • event в Preact — это синтетический объект, совместимый с оригинальным DOM-событием.
  • Можно останавливать распространение события с помощью event.stopPropagation() и предотвращать стандартное действие event.preventDefault().

Обработка событий клавиатуры

События клавиатуры позволяют отслеживать нажатия клавиш, сочетания и ввод текста. Основные события:

  • onKeyDown — срабатывает при нажатии клавиши.
  • onKeyUp — при отпускании клавиши.
  • onKeyPress — устаревшее событие, используемое для символов (лучше использовать onKeyDown).

Пример использования:

import { h } from 'preact';
import { useState } from 'preact/hooks';

function KeyLogger() {
  const [lastKey, setLastKey] = useState('');

  const handleKeyDown = (event) => {
    setLastKey(event.key);
  };

  return (
    <input
      type="text"
      placeholder="Нажмите клавишу"
      onKeyD own={handleKeyDown}
    />
    <p>Последняя нажатая клавиша: {lastKey}</p>
  );
}

Ключевые моменты:

  • event.key — возвращает символ нажатой клавиши (например, 'a').
  • event.code — возвращает физическую клавишу ('KeyA').
  • Модификаторы: event.altKey, event.ctrlKey, event.shiftKey, event.metaKey.

Комбинированная обработка событий

В Preact часто требуется обрабатывать события мыши и клавиатуры одновременно, например, при реализации интерактивных элементов. Возможна привязка нескольких обработчиков к одному элементу.

Пример: условное срабатывание клика по клавише Ctrl

function CtrlClickButton() {
  const handleClick = (event) => {
    if (event.ctrlKey) {
      alert('Ctrl + клик сработал!');
    }
  };

  return <button onCl ick={handleClick}>Нажмите с Ctrl</button>;
}

Передача параметров в обработчики

Для передачи параметров в обработчик событий используется замыкание или функция-обёртка.

Пример:

function ListItem({ id, onSelect }) {
  return (
    <li onCl ick={() => onSelect(id)}>
      Элемент {id}
    </li>
  );
}

function App() {
  const handleSelect = (id) => {
    console.log('Выбран элемент', id);
  };

  return (
    <ul>
      <ListItem id={1} onSELECT={handleSelect} />
      <ListItem id={2} onSELECT={handleSelect} />
    </ul>
  );
}

Оптимизация и особенности Preact

  • Авто-биндинг: функции не биндуются автоматически к классовым компонентам, рекомендуется использовать функциональные компоненты с хуками.
  • Синтетические события: упрощают совместимость с браузерами и обеспечивают кроссбраузерную работу.
  • События на документах и окне: при необходимости обработки глобальных событий клавиатуры или мыши можно использовать useEffect:
import { useEffect } from 'preact/hooks';

useEffect(() => {
  const handleKeyDown = (event) => console.log(event.key);
  window.addEventListener('keydown', handleKeyDown);
  return () => window.removeEventListener('keydown', handleKeyDown);
}, []);
  • События на элементах SVG: Preact поддерживает события на SVG-элементах так же, как и на HTML.

Практические рекомендации

  • Для быстрого прототипирования предпочтительны функциональные компоненты с useState и useEffect.
  • Не рекомендуется смешивать onClick с низкоуровневыми DOM-обработчиками без явной необходимости.
  • Всегда контролировать события клавиатуры на элементах с фокусом (input, textarea) для предотвращения неожиданных действий.
  • Использование клавиатурных модификаторов и проверка event.repeat позволяет улучшить UX при длительном удержании клавиш.

Соблюдение этих подходов обеспечивает чистый, масштабируемый код с удобной обработкой всех событий клавиатуры и мыши в Preact.

Оглавление