# Метод addEventListener

Метод `addEventListener` позволяет назначить на элемент обработчики событий. С его помощью, можно указать, например, что делать при клике по кнопке или что делать при наборе текста в текстовом поле. В первом параметре указываем тип передаваемого события, во втором - функцию, которая будет срабатывать после события, указанного в первом параметре. В третьем необязательном параметре передаем характеристики объекта (`once`, `capture`, `passive`) или параметр `useCapture`.

## Синтаксис

`элемент.addEventListener('тип события', функция, [характеристики объекта]); или элемент.addEventListener('тип события', функция, [useCapture]);`

## Пример

Давайте сделаем так, чтобы при клике на кнопку выводилось сообщение:

`<input type="button" id="button" value="click me">` `let button = document.querySelector('#button'); button.addEventListener('click', function() { alert('message'); });`

:

## Пример

Давайте напишем код, чтобы при потере фокуса в инпуте выводилось сообщение с текстом этого инпута:

`<input id="input" value="text">` `let input = document.querySelector('#input'); input.addEventListener('blur', function() { alert(this.value); });`

:

## Пример

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

`<input type="button" id="button" value="click me">` `let button = document.querySelector('#button'); button.addEventListener('click', function() { console.log('message'); }, { once: true } );`

## Пример

Параметр `passive` запрещает вызывать метод `event.preventDefault` при обработке события. Давайте к предыдущему примеру применим метод `event.preventDefault`, а также укажем в параметре `passive` значение `true`:

`<input type="button" id="button" value="click me">` `let button = document.querySelector('#button'); button.addEventListener('click', function(event) { event.preventDefault(); console.log('No message'); }, { passive: true } );`

После выполнения кода мы увидим следующие сообщения:

`'No message'; 'Unable to preventDefault inside passive event listener invocation.'`

## Пример

Параметр `useCapture` в значении `true` показывает всплытие событий от внутреннего элемента до внешнего, при значении `false` - от внешнего до внутреннего элемента. При передаче параметра `useCapture` его имя опускается и записывает просто `true` или `false`. Давайте посмотрим как всплывают события в родительском и дочернем элементах при клике на них:

`<div id="parent">Parent <p id="child">Child</p> </div>` `#parent{ width: 60px; padding: 10px; border: 1px solid red; text-align: center; } #child{ width: 60px; marging-right: 40px; border: 1px solid blue; text-align: center; }` `let parent = document.querySelector('#parent'); let child = document.querySelector('#parent'); parent.addEventListener('click', () => alert('parent'), true ); child.addEventListener('click', () => alert('child'), true );`

:

## Смотрите также

- метод `removeEventListener`,
  который отвязывает событие от элемента

← →
↑
en ru