Die Methode addEventListener

Die Methode addEventListener ermöglicht es, Ereignis-Handler einem Element zuzuordnen. Mit ihrer Hilfe kann man beispielsweise festlegen, was bei einem Klick auf einen Button geschehen soll oder was bei der Texteingabe in ein Textfeld passieren soll. Im ersten Parameter wird der Typ des übergebenen Ereignisses angegeben, im zweiten - die Funktion, die nach dem im ersten Parameter angegebenen Ereignis ausgeführt wird. Im dritten optionalen Parameter werden die Eigenschaften des Objekts (once, capture, passive) oder der Parameter useCapture übergeben.

Syntax

element.addEventListener('Ereignistyp', Funktion, [Objekteigenschaften]);
oder
element.addEventListener('Ereignistyp', Funktion, [useCapture]);

Beispiel

Lassen Sie uns bewirken, dass bei einem Klick auf den Button eine Nachricht ausgegeben wird:

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

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

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

Beispiel

Lassen Sie uns Code schreiben, damit beim Verlust des Fokus im Input eine Nachricht mit dem Text dieses Inputs ausgegeben wird:

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

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

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

Beispiel

Lassen Sie uns bewirken, dass bei einem Klick auf den Button die Nachricht nur einmal in der Konsole ausgegeben wird. Dafür nutzen wir den zweiten Parameter:

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

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

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

Beispiel

Der Parameter passive verbietet den Aufruf der Methode event.preventDefault bei der Ereignisbehandlung. Lassen Sie uns auf das vorherige Beispiel die Methode event.preventDefault anwenden und zudem im Parameter passive den Wert true angeben:

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

Nach der Ausführung des Codes werden wir folgende Meldungen sehen:

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

Beispiel

Der Parameter useCapture mit dem Wert true zeigt das Bubbling der Ereignisse vom inneren Element zum äußeren, bei dem Wert false - vom äußeren zum inneren Element. Bei der Übergabe des Parameters useCapture wird sein Name weggelassen und einfach true oder false geschrieben. Lassen Sie uns anschauen, wie Ereignisse im übergeordneten und untergeordneten Element bei einem Klick auf sie aufsteigen:

<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
);

Siehe auch

die Methode removeEventListener,
die ein Ereignis vom Element löst