Добавляем touchstart и click на один элемент: сокращаем код

Быстрый ответ

Если вам нужно прикрепить к одному HTML-элементу несколько обработчиков событий, можно воспользоваться методом addEventListener(), указывая разные типы событий:

var button = document.querySelector('#button');

// При нажатии на кнопку выводится сообщение "Эврика!" в консоль
button.addEventListener('click', function() {console.log('Эврика! Кнопка нажата!')});

// При наведении на кнопку она становится зеленой
button.addEventListener('mouseenter', function() {button.style.background = 'green'});

// Когда курсор уходит с кнопки, она возвращается в исходное состояние
button.addEventListener('mouseleave', function() {button.style.background = ''});

В этом примере мы используем три разных события — click, mouseenter и mouseleave, чтобы осуществлять различные действия с одной и той же кнопкой.

Завершение

Для повышения производительности при работе с такими общими событиями, как click и touchstart, целесообразно использовать один обработчик, что способствует оптимизации кода:

const button = document.querySelector('#button');

// При нажатии на кнопку или касании её выводится сообщение "Ура!" в консоль
const commonHandler = event => console.log('Ура! Кнопка на которую нажали или касались!');

['click', 'touchstart'].forEach(event => button.addEventListener(event, commonHandler));

Данная техника позволяет избежать дублирования кода и обеспечивает отзывчивость кнопки как на стационарных компьютерах, так и на мобильных устройствах.

Визуализация

Общий подход к обработке событий

Если нужно обрабатывать действия, происходящие с разными дочерними элементами, можно привязать обработчики к родительскому элементу. Это исключает необходимость добавления обработчиков к каждому дочернему элементу отдельно:

document.addEventListener('click', (event) => {
  if (event.target.classList.contains('button')) {
    console.log('Обработали непослушное событие кнопки.');
  }
});

Подробнее об этом расскажет наш спикер на видео

Комплексное управление событиями

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

const handlerObject = {
  click: function() {
    console.log('Зафиксирован клик по нашему объекту!');
  },
  mouseenter: function() {
    console.log('Отметили событие приближения к объекту!');
  },
  handleEvent(event) {
    switch (event.type) {
      case 'click':
        this.click(event);
        break;
      case 'mouseenter':
        this.mouseenter(event);
        break;
    }
  }
};

element.addEventListener('click', handlerObject);
element.addEventListener('mouseenter', handlerObject);

Такой подход упрощает код, делает его масштабируемым и лаконичным.

Полезные материалы

Сосредоточьтесь на деталях при работе с событиями

Стараться не создавать избыточные обработчики для одного и того же события, чтобы избежать повторяющихся действий. Используйте общие функции там, где это возможно.

Управление памятью

Грамотное управление памятью предусматривает своевременное удаление обработчиков событий, которые больше не требуются, особенно при работе с динамическими элементами. Это поможет избежать утечек памяти.

Иерархия событий

Важным является понимание принципов всплытия и перехвата событий, а также использование метода event.stopPropagation() для ограничения их распространения.

Элемент (🔘):
- **Click** Событие 🖱️  => {handleClick Функция ☑️}
- **Hover** Событие 🌟 => {handleHover Функция ✨}
- **Drag** Событие 🚚  => {handleDrag Функция 🪂}

Один элемент может вызывать разные действия в ответ на различные типы событий.

🔘 **Функциональные элементы:**

- 🖱️ Click:     **Срабатывает** (вызывает функцию)
- 🌟 Hover:     **Подсвечивает** (запускает другую функцию)
- 🚚 Drag:      **Перетаскивает** (в ответ на это активируется ещё одна функция)

Продвинутые техники для мастерства в обработке событий

Работа с вложенными элементами

При работе с вложенными элементами и использовании делегирования событий можно воспользоваться методом closest для определения целевого элемента:

document.addEventListener('click', (event) => {
  const menuItem = event.target.closest('.menu-item');
  if (menuItem) {
    console.log(`Название выбранной кнопки: ${menuItem.innerText}. Работает!`);
  }
});

Карта событий

Чтобы облегчить масштабирование и упрощение поддержки кода, можно использовать карту событий и соответствующих им обработчиков:

const eventMap = new Map([
  ['click', handleMouseClick],
  ['mouseover', handleMouseOver],
]);

for (let [event, handler] of eventMap) {
  element.addEventListener(event, handler);
}

Стратегия для повышения производительности

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

Полезные материалы

1. EventTarget: метод addEventListener() — Web API | MDN
2. Введение в браузерные события — javascript.info
3. Функции — JavaScript | MDN
4. Как привязать несколько событий к одному обработчику (без JQuery)? — Stack Overflow
5. Делегирование событий — davidwalsh.name
6. Опасности отмены распространения событий — CSS-Tricks
7. Справочник событий — MDN