Метод addEventListener

Метод addEventListener омогућава додељивање елементу руковаоца догађајима. Њиме се може, на пример, одредити шта да се уради при клику на дугме или шта да се уради при уносу текста у текстуално поље. У првом параметру наводимо тип догађаја који се прослеђује, у другом - функцију која ће се активирати након догађаја наведеног у првом параметру. У трећем опционалном параметру прослеђујемо карактеристике објекта (once, capture, passive) или параметар useCapture.

Синтакса

element.addEventListener('тип догађаја', funkcija, [karakteristike objekta]);
ili
element.addEventListener('тип догађаја', funkcija, [useCapture]);

Пример

Хајде да урадимо тако да се при клику на дугме прикаже порука:

<input type="button" id="button" value="кликни ме">

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

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

Пример

Хајде да напишемо код тако да се при губитку фокуса у инпуту прикаже порука са текстом тог инпута:

<input id="input" value="текст">

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

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

Пример

Хајде да урадимо тако да се при клику на дугме порука прикаже у конзоли само једном. За то ћемо искористити трећи параметар:

<input type="button" id="button" value="кликни ме">

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

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

Пример

Параметар passive забрањује позивање методе event.preventDefault при обради догађаја. Хајде да на претходни пример применимо метод event.preventDefault, а такође да наведемо у параметру passive вредност true:

<input type="button" id="button" value="кликни ме">

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

button.addEventListener('click',
	function(event) {
		event.preventDefault();
		console.log('Нема поруке');
	},
	{
		passive: true
	}
);

Након извршавања кода видећемо следеће поруке:

'Нема поруке';
'Unable to preventDefault inside passive event listener invocation.'

Пример

Параметар useCapture у вредности true показује продирање (bubbling) догађаја од унутрашњег елемента до спољашњег, при вредности false - од спољашњег до унутрашњег елемента. При прослеђивању параметра useCapture његово име се изоставља и записује се једноставно true или false. Хајде да видимо како догађаји продиру у родитељском и дететском елементу при клику на њих:

<div id="parent">Родитељ
	<p id="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('#child');

parent.addEventListener('click',
	() => alert('родитељ'), 
	true
);
child.addEventListener('click',
	() => alert('дете'), 
	true
);

Види такође

метод removeEventListener,
који одваја догађај од елемента