Metode addEventListener

Metode addEventListener ļauj piešķirt elementam notikumu apstrādes funkcijas. Ar tās palīdzību var norādīt, piemēram, ko darīt, noklikšķinot uz pogas vai ko darīt, ierakstot tekstu teksta laukā. Pirmajā parametrā mēs norādām pārraidāmā notikuma veidu, otrajā - funkciju, kas darbosies pēc pirmajā parametrā norādītā notikuma. Trešajā neobligātajā parametrā mēs nododam objekta raksturojumus (once, capture, passive) vai parametru useCapture.

Sintakse

element.addEventListener('notikuma veids', funkcija, [objekta raksturojumi]);
vai
element.addEventListener('notikuma veids', funkcija, [useCapture]);

Piemērs

Izveidosim tā, lai, noklikšķinot uz pogas, tiktu izvadīts ziņojums:

<input type="button" id="button" value="noklikšķini uz manis">

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

button.addEventListener('click', function() {
	alert('ziņojums');
});

Piemērs

Uzrakstīsim kodu, lai, zaudējot fokusu ievades laukā, tiktu izvadīts ziņojums ar šī ievades lauka tekstu:

<input id="input" value="teksts">

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

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

Piemērs

Izveidosim tā, lai, noklikšķinot uz pogas, ziņojums tiktu izvadīts konsolē tikai vienu reizi. Lai to izdarītu, izmantosim otro parametru:

<input type="button" id="button" value="noklikšķini uz manis">

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

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

Piemērs

Parametrs passive aizliedz izsaukt metodi event.preventDefault, apstrādājot notikumu. Piemērosim iepriekšējā piemērā metodi event.preventDefault, kā arī norādīsim parametrā passive vērtību true:

<input type="button" id="button" value="noklikšķini uz manis">

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

button.addEventListener('click',
	function(event) {
		event.preventDefault();
		console.log('Nav ziņojuma');
	},
	{
		passive: true
	}
);

Pēc koda izpildes mēs redzēsim šādus ziņojumus:

'Nav ziņojuma';
'Unable to preventDefault inside passive event listener invocation.'

Piemērs

Parametrs useCapture ar vērtību true parāda notikumu izplatīšanos no iekšējā elementa uz ārējo, bet ar vērtību false - no ārējā uz iekšējo elementu. Padodot parametru useCapture, tā vārds tiek izlaists un ierakstīts vienkārši true vai false. Apskatīsim, kā notikumi izplatās vecāka un pakārtotajos elementos, uz tiem noklikšķinot:

<div id="parent">Vecāks
	<p id="child">Bērns</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('vecāks'), 
	true
);
child.addEventListener('click',
	() => alert('bērns'), 
	true
);

Skatiet arī

metode removeEventListener,
kas atsaista notikumu no elementa