addEventListener-metodi

Metodi addEventListener mahdollistaa elementeille käsittelijöiden asettamisen tapahtumille. Sen avulla voidaan määrittää esimerkiksi mitä tehdä kun painiketta klikataan tai mitä tehdä kun tekstikenttään kirjoitetaan tekstiä. Ensimmäisessä parametrissa määritetään tapahtuman tyyppi, toisessa - funktio, joka suoritetaan määritetyn tapahtuman jälkeen. Kolmannessa valinnaisessa parametrissä annetaan objektin ominaisuudet (once, capture, passive) tai parametri useCapture.

Syntaksi

javascriptelementti.addEventListener('tapahtuman tyyppi', funktio, [objektin ominaisuudet]);
tai
elementti.addEventListener('tapahtuman tyyppi', funktio, [useCapture]);

Esimerkki

Tehdään niin, että painiketta klikattaessa tulostuu viesti:

html<input type="button" id="button" value="klikkaa minua">

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

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

Результат:

Esimerkki

Kirjoitetaan koodi, joka tulostaa viestin tekstikentän sisällöstä kun se menettää fokuksen:

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

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

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

Результат:

Esimerkki

Tehdään niin, että painiketta klikattaessa viesti tulostuu konsoliin vain kerran. Käytetään tähän toista parametria:

html<input type="button" id="button" value="klikkaa minua">

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

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

Esimerkki

Parametri passive kieltää event.preventDefault -metodin kutsumisen tapahtumaa käsiteltäessä. Sovelletaan edelliseen esimerkkiin event.preventDefault -metodia ja määritetään parametrille passive arvoksi true:

html<input type="button" id="button" value="klikkaa minua">

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

button.addEventListener('click',
  function(event) {
    event.preventDefault();
    console.log('Ei viestiä');
  },
  {
    passive: true
  }
);

Koodin suorituksen jälkeen näemme seuraavat viestit:

javascript'Ei viestiä';
'Unable to preventDefault inside passive event listener invocation.'

Esimerkki

Parametri useCapture arvolla true näyttää tapahtumien kuplimisen sisimmästä elementistä ulompaiseen, kun arvolla false - uloimmasta sisimpään elementtiin. Kun parametri useCapture välitetään, sen nimi jätetään pois ja kirjoitetaan vain true tai false. Katsotaan kuinka tapahtumat kuplivat vanhemman ja lapsielementeissä niitä klikattaessa:

html<div id="parent">Vanhempi
  <p id="child">Lapsi</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('vanhempi'), 
  true
);
child.addEventListener('click',
  () => alert('lapsi'), 
  true
);

Результат:

Katso myös