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

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

Esimerkki

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

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

let 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:

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

let 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:

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

let 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:

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

let 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:

'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:

<div id="parent">Vanhempi
	<p id="child">Lapsi</p>
</div>

#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;
}

let parent = document.querySelector('#parent');
let child = document.querySelector('#parent');

parent.addEventListener('click',
	() => alert('vanhempi'), 
	true
);
child.addEventListener('click',
	() => alert('lapsi'), 
	true
);

Katso myös

metodi removeEventListener,
joka irrottaa tapahtuman elementistä