Метад 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
);

Результат:

Глядзіце таксама