Metoda addEventListener

Metoda addEventListener omogoča dodelitev elementu obravnavalcev dogodkov. Z njeno pomočjo lahko določimo, na primer, kaj naj se zgodi ob kliku gumba ali kaj naj se zgodi pri vnosu besedila v besedilno polje. V prvem parametru podamo vrsto dogodka, v drugem pa funkcijo, ki se bo sprožila po dogodku, določenem v prvem parametru. V tretjem neobveznem parametru podamo karakteristike objekta (once, capture, passive) ali parameter useCapture.

Sintaksa

element.addEventListener('tip dogodka', funkcija, [karakteristike objekta]);
ali
element.addEventListener('tip dogodka', funkcija, [useCapture]);

Primer

Naredimo tako, da se ob kliku na gumb izpiše sporočilo:

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

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

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

Primer

Napišimo kodo, da se ob izgubi fokusa v vnosnem polju izpiše sporočilo z besedilo tega vnosnega polja:

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

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

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

Primer

Naredimo tako, da se ob kliku na gumb sporočilo izpiše v konzolo samo enkrat. Za to uporabimo drugi parameter:

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

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

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

Primer

Parameter passive prepoveduje klic metode event.preventDefault pri obravnavi dogodka. K prejšnjemu primeru uporabimo metodo event.preventDefault in hkrati določimo v parametru passive vrednost true:

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

Po izvedbi kode bomo videli naslednja sporočila:

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

Primer

Parameter useCapture z vrednostjo true prikazuje širjenje dogodkov od notranjega elementa do zunanjega, pri vrednosti false pa od zunanjega do notranjega elementa. Pri podajanju parametra useCapture se njegovo ime izpusti in zapiše preprosto true ali false. Poglejmo, kako se širijo dogodki v starševskem in podrejenem elementu ob kliku nanje:

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

Glejte tudi

metoda removeEventListener,
ki odveže dogodek od elementa