Die addEventListener-metode

Die metode addEventListener laat jou toe om gebeurtenishanteerders op 'n element te plaas. Daarmee kan jy byvoorbeeld spesifiseer wat om te doen met 'n klik op 'n knoppie of wat om te doen wanneer teks ingetik word in 'n teksveld. In die eerste parameter spesifiseer ons die tipe gebeurtenis, in die tweede - die funksie wat sal aktiveer nadat die gebeurtenis gespesifiseer in die eerste parameter plaasgevind het. In die derde opsionele parameter gee ons die eienskappe van die objek (once, capture, passive) of die parameter useCapture.

Sintaksis

element.addEventListener('gebeurtenistipe', funksie, [objekeienskappe]);
of
element.addEventListener('gebeurtenistipe', funksie, [useCapture]);

Voorbeeld

Kom ons maak dit so dat 'n boodskap vertoon word wanneer op 'n knoppie geklik word:

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

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

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

Voorbeeld

Kom ons skryf kode sodat, wanneer die inset fokus verloor, 'n boodskap met die teks van daardie inset vertoon word:

<input id="input" value="teks">

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

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

Voorbeeld

Kom ons maak dit so dat wanneer op 'n knoppie geklik word, die boodskap slegs een keer in die konsole vertoon word. Vir hierdie doel gebruik ons die derde parameter:

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

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

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

Voorbeeld

Die parameter passive verbied om die metode event.preventDefault aan te roep tydens die verwerking van die gebeurtenis. Kom ons pas die metode event.preventDefault toe op die vorige voorbeeld, en spesifiseer ook in die parameter passive die waarde true:

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

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

button.addEventListener('click',
	function(event) {
		event.preventDefault();
		console.log('Geen boodskap nie');
	},
	{
		passive: true
	}
);

Na die uitvoering van die kode sal ons die volgende boodskappe sien:

'Geen boodskap nie';
'Unable to preventDefault inside passive event listener invocation.'

Voorbeeld

Die parameter useCapture met die waarde true toon die borrel van gebeurtenisse van die innerlike element na die buitenste, met die waarde false - van die buitenste na die innerlike element. Wanneer die parameter useCapture oorgedra word, word sy naam weggelaat en word eenvoudig true of false geskryf. Kom ons kyk hoe gebeurtenisse in die ouer- en kindelemente borrel wanneer daarop geklik word:

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

Sien ook

die metode removeEventListener,
wat 'n gebeurtenis van 'n element loskoppel