Metodas addEventListener

Metodas addEventListener leidžia priskirti elementui įvykių tvarkytuvus. Su jo pagalba galima nurodyti, pavyzdžiui, ką daryti paspaudus mygtuką arba ką daryti renkant tekstą teksto laukelyje. Pirmame parametre nurodome perduodamo įvykio tipą, antrame - funkciją, kuri suveiks po įvykio, nurodyto pirmame parametre. Trečiame neprivalomame parametre perduodame objekto charakteristikas (once, capture, passive) arba parametrą useCapture.

Sintaksė

elementas.addEventListener('įvykio tipas', funkcija, [objekto charakteristikos]);
arba
elementas.addEventListener('įvykio tipas', funkcija, [useCapture]);

Pavyzdys

Padarykime taip, kad paspaudus mygtuką būtų išvestas pranešimas:

<input type="button" id="button" value="spausk mane">

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

button.addEventListener('click', function() {
	alert('pranešimas');
});

Pavyzdys

Parašykime kodą, kad praradus fokusą įvesties laukelyje būtų išvestas pranešimas su to įvesties laukelio tekstu:

<input id="input" value="tekstas">

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

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

Pavyzdys

Padarykime taip, kad paspaudus mygtuką pranešimas būtų išvestas į konsolę tik vieną kartą. Tam pasinaudokime trečiuoju parametru:

<input type="button" id="button" value="spausk mane">

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

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

Pavyzdys

Parametras passive draudžia iškviesti metodą event.preventDefault apdorojant įvykį. Pritaikykime ankstesniame pavyzdyje metodą event.preventDefault, taip pat nurodykime parametre passive reikšmę true:

<input type="button" id="button" value="spausk mane">

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

button.addEventListener('click',
	function(event) {
		event.preventDefault();
		console.log('Jokio pranešimo');
	},
	{
		passive: true
	}
);

Vykdant kodą pamatysime šiuos pranešimus:

'Jokio pranešimo';
'Unable to preventDefault inside passive event listener invocation.'

Pavyzdys

Parametras useCapture su reikšme true rodo įvykių plitimą nuo vidinio elemento iki išorinio, su reikšme false - nuo išorinio iki vidinio elemento. Perduodant parametrą useCapture jo pavadinimas praleidžiamas ir rašomas tiesiog true arba false. Pažiūrėkime, kaip plinta įvykiai tėvinio ir dukterinio elementuose paspaudus juos:

<div id="parent">Tėvinis
	<p id="child">Dukterinis</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('tėvinis'), 
	true
);
child.addEventListener('click',
	() => alert('dukterinis'), 
	true
);

Taip pat žiūrėkite

metodas removeEventListener,
kuris atjungia įvykį nuo elemento