Обработка событий — это фундаментальный аспект программирования на JavaScript, позволяющий разработчикам реагировать на взаимодействия с пользователем и запускать определенные действия. В этой статье блога мы углубимся в встроенную обработку событий в JavaScript и рассмотрим различные методы на примерах кода.

1. Метод: addEventListener()
   Метод addEventListener() широко используется для прикрепления прослушивателей событий к элементам DOM. Он позволяет вам указать тип события для прослушивания и определить функцию обратного вызова, которая будет выполняться при срабатывании события. Вот пример:

const button = document.querySelector('#myButton');
button.addEventListener('click', function(event) {
  console.log('Button clicked!');
});

2. Метод: on[event]
   Большинство элементов DOM также имеют свойства, представляющие определенные события. Вы можете напрямую назначить функцию этим свойствам для обработки связанного события. Например:

const input = document.querySelector('#myInput');
input.oninput = function(event) {
  console.log('Input value changed!');
};

3. Метод: обработчики событий в HTML
   Вы также можете обрабатывать события непосредственно в HTML, используя атрибуты событий. Например:

<button onclick="handleClick()">Click me!</button>
<script>
  function handleClick() {
    console.log('Button clicked!');
  }
</script>

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

const parentElement = document.querySelector('#parent');
parentElement.addEventListener('click', function(event) {
  if (event.target.matches('.child')) {
    console.log('Child element clicked!');
  }
});

5. Метод: пользовательские события
   JavaScript также позволяет создавать и отправлять пользовательские события. Это может быть полезно, когда вам нужно определить собственные типы событий. Вот пример:

const customEvent = new Event('custom');
document.addEventListener('custom', function(event) {
  console.log('Custom event triggered!');
});
document.dispatchEvent(customEvent);

Встроенная обработка событий в JavaScript предоставляет мощный механизм реагирования на действия пользователя в веб-приложениях. В этой статье мы рассмотрели несколько методов, включая addEventListener(), on[event], обработчики событий в HTML, делегирование событий и пользовательские события. Освоив эти методы, вы сможете создавать более интерактивные и отзывчивые веб-интерфейсы.

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