Что такое события мыши и клавиатуры в JavaScript

События мыши и клавиатуры в JavaScript — это способ отслеживать действия пользователя, такие как клики, движение курсора, ввод с клавиатуры и другие, и реагировать на них в ваших веб-приложениях. В этой статье мы рассмотрим, как работать с такими событиями и как использовать их для создания интерактивных веб-страниц.

События мыши

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

• click: происходит при щелчке левой кнопкой мыши
• dblclick: происходит при двойном щелчке левой кнопкой мыши
• mousedown: происходит при нажатии кнопки мыши
• mouseup: происходит при отпускании кнопки мыши
• mousemove: происходит при перемещении курсора мыши

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

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

button.addEventListener('click', () => {
  console.log('Кнопка нажата');
});

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

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

• keydown: происходит при нажатии клавиши
• keyup: происходит при отпускании клавиши
• keypress: происходит при вводе символа с клавиатуры (устаревшее событие, лучше использовать keydown)

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

document.addEventListener('keydown', (event) => {
  console.log(`Клавиша "${event.key}" нажата`);
});

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

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

Пример делегирования события клика на родительском элементе:

const list = document.querySelector('ul');

list.addEventListener('click', (event) => {
  if (event.target.tagName === 'LI') {
    console.log(`Элемент списка ${event.target.textContent} был нажат`);
  }
});

Теперь у вас есть базовое понимание событий мыши и клавиатуры в JavaScript и как с ними работать. Эти знания помогут вам создавать интерактивные веб-приложения и отслеживать действия пользователя. Удачи в изучении веб-разработки! 😉