Metoda addEventListener

Metoda addEventListener omogoča dodelitev elementu obravnavalcev dogodkov. Z njeno pomočjo lahko določimo, na primer, kaj naj se zgodi ob kliku gumba ali kaj naj se zgodi pri vnosu besedila v besedilno polje. V prvem parametru podamo vrsto dogodka, v drugem pa funkcijo, ki se bo sprožila po dogodku, določenem v prvem parametru. V tretjem neobveznem parametru podamo karakteristike objekta (once, capture, passive) ali parameter useCapture.

Sintaksa

javascriptelement.addEventListener('tip dogodka', funkcija, [karakteristike objekta]);
ali
element.addEventListener('tip dogodka', funkcija, [useCapture]);

Primer

Naredimo tako, da se ob kliku na gumb izpiše sporočilo:

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

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

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

Результат:

Primer

Napišimo kodo, da se ob izgubi fokusa v vnosnem polju izpiše sporočilo z besedilo tega vnosnega polja:

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

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

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

Результат:

Primer

Naredimo tako, da se ob kliku na gumb sporočilo izpiše v konzolo samo enkrat. Za to uporabimo drugi parameter:

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

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

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

Primer

Parameter passive prepoveduje klic metode event.preventDefault pri obravnavi dogodka. K prejšnjemu primeru uporabimo metodo event.preventDefault in hkrati določimo v 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
  }
);

Po izvedbi kode bomo videli naslednja sporočila:

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

Primer

Parameter useCapture z vrednostjo true prikazuje širjenje dogodkov od notranjega elementa do zunanjega, pri vrednosti false pa od zunanjega do notranjega elementa. Pri podajanju parametra useCapture se njegovo ime izpusti in zapiše preprosto true ali false. Poglejmo, kako se širijo dogodki v starševskem in podrejenem elementu ob kliku nanje:

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

Результат:

Glejte tudi