Метод addEventListener

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

Синтаксис

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

Пример

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

html<input type="button" id="button" value="click me">

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

button.addEventListener('click', function() {
  alert('message');
});

Результат:

Пример

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

html<input id="input" value="text">

javascriptlet input = document.querySelector('#input');

input.addEventListener('blur', function() {
  alert(this.value);
});

Результат:

Пример

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

html<input type="button" id="button" value="click me">

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

button.addEventListener('click',
  function() {
    console.log('message');
  },
  {
    once: true
  }
);

Пример

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

html<input type="button" id="button" value="click me">

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

button.addEventListener('click',
  function(event) {
    event.preventDefault();
    console.log('No message');
  },
  {
    passive: true
  }
);

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

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

Пример

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

html<div id="parent">Parent
  <p id="child">Child</p>
</div>

css#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;
}

javascriptlet parent = document.querySelector('#parent');
let child = document.querySelector('#parent');

parent.addEventListener('click',
  () => alert('parent'), 
  true
);
child.addEventListener('click',
  () => alert('child'), 
  true
);

Результат:

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