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

Результат:

Вижте също