Addeventlistener JavaScript: как использовать и когда это необходимо?

addEventListener в JavaScript - это метод, который используется для назначения обработчика событий на элементы DOM (Document Object Model). Он позволяет назначать несколько обработчиков для одного события на одном элементе.

Синтаксис метода addEventListener:

`element.addEventListener(event, function, useCapture)`

• `event` - это тип события, который вы хотите обрабатывать (например, 'click' или 'keypress').
• `function` - это функция JavaScript, которая должна быть выполнена, когда событие происходит. Функция может принимать аргумент события (event) для доступа к информации о событии.
• `useCapture` - это булево значение (true или false), указывающее, когда обработчик событий должен быть вызван. Если useCapture равен true, обработчик событий будет вызван на захватывающей фазе, а если false, то на всплывающей фазе.

Пример использования метода addEventListener:

const button = document.querySelector('button')
button.addEventListener('click', event => {
  console.log('Кнопка была нажата');
})

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

Также можно добавить несколько обработчиков на один и тот же элемент:

const button = document.querySelector('button')
function myFunction() {
  console.log('Первый обработчик')
}
function myOtherFunction() {
  console.log('Второй обработчик')
}
button.addEventListener('click', myFunction)
button.addEventListener('click', myOtherFunction)

В этом примере кнопка будет иметь два обработчика событий: myFunction и myOtherFunction. При клике на кнопку оба обработчика будут выполнены.

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