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

Фреймворк Lit предоставляет удобный способ работы с событиями клавиатуры и мыши через систему реактивных компонентов и декларативного связывания событий с методами класса. Работа с событиями в Lit строится вокруг директивы @event, которая позволяет привязать обработчик к DOM-элементу прямо в шаблоне.

Привязка событий к элементам

События в Lit обрабатываются с помощью синтаксиса:

html`<button @click=${this.handleClick}>Нажми меня</button>`

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

  • @click — событие, к которому происходит привязка.
  • this.handleClick — метод класса, который будет вызван при событии.
  • Контекст метода сохраняется автоматически, если использовать стрелочные функции или привязывать метод через конструктор.

Для клавиатурных событий используются стандартные DOM-события:

  • keydown — нажатие клавиши
  • keyup — отпускание клавиши
  • keypress — нажатие клавиши (устаревающее, но иногда используется для совместимости)

Пример привязки клавиатурного события:

html`<input @keydown=${this.handleKeydown} placeholder="Введите текст">`

Метод обработчика может использовать объект события:

handleKeydown(event) {
    console.log(`Нажата клавиша: ${event.key}`);
    if (event.key === 'Enter') {
        this.submitForm();
    }
}

Работа с мышью

Мышиные события включают:

  • click — клик
  • dblclick — двойной клик
  • mousedown / mouseup — нажатие и отпускание кнопки мыши
  • mousemove — движение мыши
  • mouseenter / mouseleave — вход и выход курсора с элемента

Пример сложной обработки мыши:

html`
  <div
    @mousedown=${this.startDrag}
    @mousemove=${this.onDrag}
    @mouseup=${this.endDrag}
    style="width:200px; height:200px; background:#ccc;">
    Перетащи меня
  </div>
`

Методы:

startDrag(event) {
    this.dragging = true;
    this.startX = event.clientX;
    this.startY = event.clientY;
}

onDrag(event) {
    if (!this.dragging) return;
    const dx = event.clientX - this.startX;
    const dy = event.clientY - this.startY;
    this.style.transform = `translate(${dx}px, ${dy}px)`;
}

endDrag(event) {
    this.dragging = false;
}

Делегирование событий

В Lit можно использовать делегирование событий через родительский элемент, особенно для динамически создаваемых элементов. Пример:

html`
  <ul @click=${this.handleListClick}>
    <li data-id="1">Элемент 1</li>
    <li data-id="2">Элемент 2</li>
    <li data-id="3">Элемент 3</li>
  </ul>
`

Метод:

handleListClick(event) {
    const li = event.target.closest('li');
    if (!li) return;
    console.log(`Клик по элементу с id=${li.dataset.id}`);
}

Модификация поведения событий

Lit поддерживает работу с объектом event полностью. Для предотвращения стандартного поведения и остановки всплытия используются методы preventDefault() и stopPropagation():

handleClick(event) {
    event.preventDefault(); // предотвращает стандартное действие
    event.stopPropagation(); // останавливает всплытие события
    console.log('Обработано событие click');
}

Можно комбинировать клавиатурные и мышиные события для сложных интерфейсов:

html`<div @keydown=${this.handleKeyMouseCombination} @click=${this.handleClick}>Комбинации</div>`

Автоматическое связывание и стрелочные функции

Чтобы сохранить контекст this в методах обработчиков, рекомендуется использовать стрелочные функции или привязку через конструктор:

constructor() {
    super();
    this.handleClick = this.handleClick.bind(this);
}

Или:

handleClick = (event) => {
    console.log('Контекст сохранён автоматически');
}

Встроенные модификаторы событий

Lit поддерживает синтаксис модификаторов событий:

  • .preventDefault — предотвращение действия браузера
  • .stopPropagation — остановка всплытия
  • .capture — использование фазового захвата

Пример:

html`<form @submit=${this.onSubmit} .preventDefault=${true}>Отправка формы</form>`

Резюме по практике

  • Для любых стандартных событий используется @event=${handler}.
  • Контекст this лучше сохранять через стрелочные функции или bind.
  • Клавиатурные события позволяют реагировать на нажатия отдельных клавиш (event.key).
  • Мышиные события поддерживают сложные взаимодействия (перетаскивание, двойной клик).
  • Делегирование событий через родителя облегчает работу с динамическими элементами.
  • Модификаторы событий делают код более чистым и избавляют от необходимости явно вызывать preventDefault или stopPropagation.

Обработка событий в Lit сочетает декларативность с полной гибкостью DOM API, что позволяет создавать интерактивные и отзывчивые компоненты с минимальным количеством кода и высокой читаемостью.

Оглавление