Metoda addEventListener

Metoda addEventListener permite atribuirea de manipulatoare de evenimente unui element. Cu ajutorul ei, poți specifica, de exemplu, ce să se facă la un clic pe un buton sau ce să se facă la tastarea textului într-un câmp text. În primul parametru specificăm tipul evenimentului transmis, în al doilea - funcția care se va executa după evenimentul specificat în primul parametru. În al treilea parametru opțional transmitem caracteristicile obiectului (once, capture, passive) sau parametrul useCapture.

Sintaxă

element.addEventListener('tip eveniment', functie, [caracteristici obiect]);
sau
element.addEventListener('tip eveniment', functie, [useCapture]);

Exemplu

Să facem ca la un clic pe buton să se afișeze un mesaj:

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

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

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

Exemplu

Să scriem cod astfel încât la pierderea focusului în input să se afișeze un mesaj cu textul din acel input:

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

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

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

Exemplu

Să facem ca la un clic pe buton mesajul să se afișeze în consolă doar o singură dată. Pentru aceasta vom folosi al doilea parametru:

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

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

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

Exemplu

Parametrul passive interzice apelarea metodei event.preventDefault la manipularea evenimentului. Să aplicăm metodei event.preventDefault din exemplul anterior, și de asemenea să indicăm în parametrul passive valoarea 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
	}
);

După executarea codului vom vedea următoarele mesaje:

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

Exemplu

Parametrul useCapture cu valoarea true arată bubbling-ul evenimentelor de la elementul interior către exterior, iar cu valoarea false - de la exterior către elementul interior. La transmiterea parametrului useCapture numele acestuia este omis și se scrie simplu true sau false. Să vedem cum bubbling-ul evenimentelor în elementul părinte și copil la clic pe ele:

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

Vezi și

metoda removeEventListener,
care dezleagă evenimentul de element