Metod addEventListener

Metod addEventListener omogućava dodelu osluškivača događaja na element. Uz njegovu pomoć, možete odrediti, na primer, šta da se radi pri kliku na dugme ili šta da se radi pri unosu teksta u tekstualno polje. U prvom parametru navodimo tip događaja, u drugom - funkciju, koja će se izvršiti nakon događaja navedenog u prvom parametru. U trećem opcionom parametru prosleđujemo karakteristike objekta (once, capture, passive) ili parametar useCapture.

Sintaksa

element.addEventListener('tip događaja', funkcija, [karakteristike objekta]);
ili
element.addEventListener('tip događaja', funkcija, [useCapture]);

Primer

Hajde da napravimo da se pri kliku na dugme ispiše poruka:

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

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

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

Primer

Hajde da napišemo kod, da se pri gubitku fokusa na inputu ispisuje poruka sa tekstom iz tog inputa:

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

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

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

Primer

Hajde da napravimo da se pri kliku na dugme poruka ispiše u konzolu samo jednom. Za ovo ćemo iskoristiti treći parametar:

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

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

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

Primer

Parametar passive zabranjuje pozivanje metode event.preventDefault prilikom obrade događaja. Hajde da na prethodni primer primenimo metod event.preventDefault, a takođe navedimo u 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
	}
);

Posle izvršavanja koda videćemo sledeće poruke:

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

Primer

Parametar useCapture u vrednosti true pokazuje propagaciju (bubbling) događaja od unutrašnjeg elementa ka spoljašnjem, pri vrednosti false - od spoljašnjeg ka unutrašnjem elementu. Pri prosleđivanju parametra useCapture njegovo ime se izostavlja i upisuje se prosto true ili false. Hajde da pogledamo kako se propagiraju događaji u roditeljskom i podređenom elementu pri kliku na njih:

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

Pogledajte takođe

metod removeEventListener,
koji uklanja vezani događaj sa elementa