Meetod addEventListener

Meetod addEventListener võimaldab määrata elemendile sündmuste töötlejaid. Selle abil saab näiteks öelda, mida teha nupu klõpsamise korral või mida teha teksti sisestamise korral tekstiväljale. Esimeses parameetris määrame edastatava sündmuse tüübi, teises - funktsiooni, mis käivitub pärast esimeses parameetris määratud sündmust. Kolmandas valikulises parameetris edastame objekti omadused (once, capture, passive) või parameetri useCapture.

Süntaks

javascriptelement.addEventListener('sündmuse tüüp', funktsioon, [objekti omadused]);
või
element.addEventListener('sündmuse tüüp', funktsioon, [useCapture]);

Näide

Teeme nii, et nupu klõpsamisel kuvataks sõnum:

html<input type="button" id="button" value="klõpsa mind">

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

button.addEventListener('click', function() {
  alert('sõnum');
});

Результат:

Näide

Kirjutame koodi nii, et sisendväljal fookuse kaotamisel kuvataks sõnum selle välja väärtusega:

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

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

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

Результат:

Näide

Teeme nii, et nupu klõpsamisel kuvataks sõnum konsoolis ainult üks kord. Selleks kasutame teist parameetrit:

html<input type="button" id="button" value="klõpsa mind">

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

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

Näide

Parameeter passive keelab meetodi event.preventDefault kutsumise sündmuse töötlemisel. Rakendame eelmisele näitele meetodi event.preventDefault ning määrame parameetris passive väärtuseks true:

html<input type="button" id="button" value="klõpsa mind">

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

button.addEventListener('click',
  function(event) {
    event.preventDefault();
    console.log('Sõnumit pole');
  },
  {
    passive: true
  }
);

Pärast koodi käivitamist näeme järgmisi teateid:

javascript'Sõnumit pole';
'Unable to preventDefault inside passive event listener invocation.'

Näide

Parameeter useCapture väärtusega true näitab sündmuste levimist sisesest elemendist välimiseni, kui väärtus on false - välimisest sisesesse elemendi. Parameetri useCapture edastamisel selle nimi jäetakse vahele ja kirjutatakse lihtsalt true või false. Vaatame, kuidas sündmused levivad vanem- ja lastelementides nendele klõpsates:

html<div id="parent">Vanem
  <p id="child">Laps</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('vanem'), 
  true
);
child.addEventListener('click',
  () => alert('laps'), 
  true
);

Результат:

Vaata ka