Metoden addEventListener

Metoden addEventListener låter dig tilldela händelsehanterare till ett element. Med den kan du till exempel specificera vad som ska göras vid ett klick på en knapp eller vad som ska göras vid inmatning av text i ett textfält. I den första parametern anger vi typen av händelse, i den andra - funktionen som skall utlösas efter händelsen som angavs i den första parametern. I den tredje valfria parametern skickar vi egenskaper för objektet (once, capture, passive) eller parametern useCapture.

Syntax

element.addEventListener('händelsetyp', funktion, [objektegenskaper]);
eller
element.addEventListener('händelsetyp', funktion, [useCapture]);

Exempel

Låt oss göra så att ett meddelande visas när man klickar på knappen:

<input type="button" id="button" value="klicka på mig">

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

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

Exempel

Låt oss skriva kod så att när input förlorar fokus visas ett meddelande med texten från detta inputfält:

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

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

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

Exempel

Låt oss göra så att när man klickar på knappen skrivs meddelandet ut i konsolen endast en gång. För att göra detta använder vi den tredje parametern:

<input type="button" id="button" value="klicka på mig">

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

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

Exempel

Parametern passive förbjuder anrop av metoden event.preventDefault vid hantering av händelsen. Låt oss applicera metoden event.preventDefault på föregående exempel, samt ange värdet true i parametern passive:

<input type="button" id="button" value="klicka på mig">

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

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

Efter att koden har körts kommer vi att se följande meddelanden:

'Inget meddelande';
'Unable to preventDefault inside passive event listener invocation.'

Exempel

Parametern useCapture med värdet true visar hur händelser bubblar upp från det inre elementet till det yttre, medan värdet false visar från det yttre till det inre elementet. När parametern useCapture skickas utelämnas dess namn och man skriver bara true eller false. Låt oss se hur händelser bubblar upp i föräldra- och barnelement när man klickar på dem:

<div id="parent">Förälder
	<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('förälder'), 
	true
);
child.addEventListener('click',
	() => alert('barn'), 
	true
);

Se även

metoden removeEventListener,
som lossar en händelse från ett element