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

Riot.js предоставляет гибкую систему для работы с событиями, включая клавиатуру и мышь. Компоненты Riot автоматически связывают методы с DOM-событиями через атрибут on, что упрощает обработку пользовательских взаимодействий.

Связывание событий

Для обработки событий используется синтаксис:

<button oncl ick={handleClick}>Нажми меня</button>
<input onkeyd own={handleKeyDown}>

Методы, указанные в фигурных скобках, должны существовать в теле компонента:

export default {
  handleClick() {
    console.log('Кнопка нажата');
  },
  handleKeyDown(event) {
    console.log('Клавиша нажата:', event.key);
  }
}

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

  • Riot автоматически передает объект события (event) в метод.
  • Можно использовать любой DOM-событие, поддерживаемое браузером.

События мыши

Riot поддерживает стандартные события мыши:

  • onclick — клик мышью.
  • ondblclick — двойной клик.
  • onmouseenter и onmouseleave — наведение курсора.
  • onmousedown и onmouseup — нажатие и отпускание кнопки мыши.
  • onmousemove — движение курсора.

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

<div onmouseen ter={hoverIn} onmousele ave={hoverOut} onmoused own={startDrag} onmous eup={stopDrag}>
  Перетащи меня
</div>
export default {
  hoverIn() {
    console.log('Курсор вошел');
  },
  hoverOut() {
    console.log('Курсор вышел');
  },
  startDrag() {
    console.log('Начало перетаскивания');
  },
  stopDrag() {
    console.log('Конец перетаскивания');
  }
}

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

Для клавиатуры Riot позволяет обрабатывать нажатия клавиш через события onkeydown, onkeyup и onkeypress. Объект события содержит ключевую информацию:

  • event.key — значение нажатой клавиши.
  • event.code — физическая клавиша на клавиатуре.
  • event.ctrlKey, event.shiftKey, event.altKey, event.metaKey — состояния модификаторов.

Пример обработки Enter и Escape:

<input onkeyd own={checkKey}>
export default {
  checkKey(event) {
    if (event.key === 'Enter') {
      console.log('Нажат Enter');
    } else if (event.key === 'Escape') {
      console.log('Нажат Escape');
    }
  }
}

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

Для динамически создаваемых элементов удобно использовать делегирование событий через контейнер:

<ul oncl ick={handleItemClick}>
  <li data-id="1">Элемент 1</li>
  <li data-id="2">Элемент 2</li>
</ul>
export default {
  handleItemClick(event) {
    const item = event.target.closest('li');
    if (!item) return;
    console.log('Клик по элементу:', item.dataset.id);
  }
}

Делегирование сокращает количество привязок событий и повышает производительность при работе с большим количеством элементов.

Использование модификаторов

Riot позволяет указывать дополнительные модификаторы для событий через синтаксис eventName:modifier. Например:

  • onclick:prevent — предотвращает стандартное действие.
  • onclick:stop — останавливает всплытие события.
  • onkeydown:enter — обрабатывает только Enter.

Пример:

<form onsubmit:prevent={submitForm}>
  <input type="text">
  <button type="submit">Отправить</button>
</form>
export default {
  submitForm() {
    console.log('Форма отправлена без перезагрузки страницы');
  }
}

Совмещение клавиатуры и мыши

Компоненты могут обрабатывать сразу несколько типов событий для одной логики. Например, перетаскивание с поддержкой клавиш-модификаторов:

<div
  onmoused own={startDrag}
  onmousem ove={drag}
  onmous eup={stopDrag}
  onkeyd own={handleKeyModifier}>
  Перетаскиваемый блок
</div>
export default {
  startDrag(event) {
    console.log('Старт перетаскивания');
  },
  drag(event) {
    console.log('Двигаем элемент');
  },
  stopDrag(event) {
    console.log('Конец перетаскивания');
  },
  handleKeyModifier(event) {
    if (event.shiftKey) {
      console.log('Shift удерживается');
    }
  }
}

Подсказки по производительности

  • Привязка событий на уровне контейнера с делегированием уменьшает количество слушателей.
  • Использование модификаторов снижает необходимость дополнительных проверок в коде.
  • Отписка от событий не требуется для стандартных DOM-событий в Riot, так как при удалении компонента слушатели автоматически снимаются.

Обработка событий клавиатуры и мыши в Riot.js строится на простых и понятных принципах привязки методов к DOM через атрибуты компонентов, поддерживая при этом делегирование, модификаторы и работу с динамическими элементами. Это делает разработку интерактивных интерфейсов быстрым и эффективным процессом.

Оглавление