Metoden addEventListener

Metoden addEventListener giver mulighed for at tildele elementer håndteringsfunktioner for begivenheder. Med den kan man for eksempel angive, hvad der skal ske ved et klik på en knap, eller hvad der skal ske ved indtastning af tekst i et tekstfelt. I den første parameter angiver vi typen af den overførte begivenhed, i den anden - funktionen, som vil udløses efter den begivenhed, der er angivet i den første parameter. I den tredje valgfrie parameter overfører vi egenskaber for objektet (once, capture, passive) eller parameteren useCapture.

Syntaks

element.addEventListener('begivenhedstype', funktion, [objektegenskaber]);
eller
element.addEventListener('begivenhedstype', funktion, [useCapture]);

Eksempel

Lad os gøre sådan, at der vises en besked ved klik på knappen:

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

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

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

Eksempel

Lad os skrive kode, så der vises en besked med teksten fra inputfeltet, når det mister fokus:

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

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

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

Eksempel

Lad os gøre sådan, at beskeden kun vises i konsollen én gang ved klik på knappen. For at gøre dette vil vi bruge den tredje parameter:

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

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

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

Eksempel

Parameteren passive forbyder kald af metoden event.preventDefault under håndtering af begivenheden. Lad os anvende metoden event.preventDefault i det forrige eksempel og samtidig angive værdien true for parameteren passive:

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

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

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

Efter udførelse af koden vil vi se følgende beskeder:

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

Eksempel

Parameteren useCapture med værdien true viser bobling af begivenheder fra det indre element til det ydre, mens værdien false viser bobling fra det ydre til det indre element. Når parameteren useCapture overføres, udelades dens navn og der skrives simpelthen true eller false. Lad os se, hvordan begivenheder bobler i forældreelementet og child-elementet ved klik på dem:

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

Se også

metoden removeEventListener,
som fjerner en begivenhed fra et element