Metoden addEventListener

Metoden addEventListener lar deg tildele hendelseshåndterere til et element. Med den, kan du for eksempel spesifisere hva som skal gjøres ved et klikk på en knapp eller hva som skal gjøres ved inntasting av tekst i et tekstfelt. I den første parameteren angir vi typen for hendelsen, i den andre - funksjonen som vil utløses etter hendelsen spesifisert i den første parameteren. I den tredje valgfrie parameteren sender vi egenskapene til objektet (once, capture, passive) eller parameteren useCapture.

Syntaks

element.addEventListener('hendelsestype', funksjon, [objektets egenskaper]);
eller
element.addEventListener('hendelsestype', funksjon, [useCapture]);

Eksempel

La oss gjøre slik at ved et klikk på knappen vises en melding:

<input type="button" id="button" value="klikk på meg">

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

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

Eksempel

La oss skrive kode slik at ved tap av fokus i input-feltet vises en melding med teksten fra dette input-feltet:

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

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

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

Eksempel

La oss gjøre slik at ved et klikk på knappen skal meldingen vises i konsollen bare én gang. For å gjøre dette bruker vi den andre parameteren:

<input type="button" id="button" value="klikk på meg">

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

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

Eksempel

Parameteren passive forbyr kall til metoden event.preventDefault under behandling av hendelsen. La oss bruke metoden event.preventDefault på det forrige eksemplet, og også angi i parameteren passive verdien true:

<input type="button" id="button" value="klikk på meg">

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

button.addEventListener('click',
	function(event) {
		event.preventDefault();
		console.log('Ingen melding');
	},
	{
		passive: true
	}
);

Etter utførelse av koden vil vi se følgende meldinger:

'Ingen melding';
'Unable to preventDefault inside passive event listener invocation.'

Eksempel

Parameteren useCapture med verdien true viser hendelsesbobling fra det indre elementet til det ytre, med verdien false - fra det ytre til det indre elementet. Ved overføring av parameteren useCapture utelates navnet og det skrives bare true eller false. La oss se hvordan hendelser bobler opp i foreldreelementet og barneelementet ved klikk på dem:

<div id="parent">Forelder
	<p id="child">Barn</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('forelder'), 
	true
);
child.addEventListener('click',
	() => alert('barn'), 
	true
);

Se også

metoden removeEventListener,
som fjerner en hendelse fra et element