Metod addEventListener

Metod addEventListener omogućava dodelu osluškivača događaja na element. Uz njegovu pomoć, možete odrediti, na primer, šta da se radi pri kliku na dugme ili šta da se radi pri unosu teksta u tekstualno polje. U prvom parametru navodimo tip događaja, u drugom - funkciju, koja će se izvršiti nakon događaja navedenog u prvom parametru. U trećem opcionom parametru prosleđujemo karakteristike objekta (once, capture, passive) ili parametar useCapture.

Sintaksa

javascriptelement.addEventListener('tip događaja', funkcija, [karakteristike objekta]);
ili
element.addEventListener('tip događaja', funkcija, [useCapture]);

Primer

Hajde da napravimo da se pri kliku na dugme ispiše poruka:

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

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

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

Результат:

Primer

Hajde da napišemo kod, da se pri gubitku fokusa na inputu ispisuje poruka sa tekstom iz tog inputa:

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

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

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

Результат:

Primer

Hajde da napravimo da se pri kliku na dugme poruka ispiše u konzolu samo jednom. Za ovo ćemo iskoristiti treći parametar:

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

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

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

Primer

Parametar passive zabranjuje pozivanje metode event.preventDefault prilikom obrade događaja. Hajde da na prethodni primer primenimo metod event.preventDefault, a takođe navedimo u parametru passive vrednost 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
  }
);

Posle izvršavanja koda videćemo sledeće poruke:

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

Primer

Parametar useCapture u vrednosti true pokazuje propagaciju (bubbling) događaja od unutrašnjeg elementa ka spoljašnjem, pri vrednosti false - od spoljašnjeg ka unutrašnjem elementu. Pri prosleđivanju parametra useCapture njegovo ime se izostavlja i upisuje se prosto true ili false. Hajde da pogledamo kako se propagiraju događaji u roditeljskom i podređenom elementu pri kliku na njih:

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
);

Результат:

Pogledajte takođe