Методот addEventListener

Методот addEventListener овозможува да доделите на елемент обработувачи на настани. Со негова помош, можете да одредите, на пример, што да се прави при кликнување на копчето или што да се прави при внесување текст во текстуалното поле. Во првиот параметар се одредува типот на пренесениот настан, во вториот - функцијата која ќе се активира по настанот наведен во првиот параметар. Во третиот незадолжителен параметар се пренесуваат карактеристиките на објектот (once, capture, passive) или параметарот useCapture.

Синтакса

element.addEventListener('tip na nastan', funkcija, [karakteristiki na objektot]);
или
element.addEventListener('tip na nastan', funkcija, [useCapture]);

Пример

Ајде да направиме така што при кликнување на копчето да се испише порака:

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

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

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

Пример

Ајде да напишеме код, така што при губење на фокусот во инпут да се испише порака со текстот од тој инпут:

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

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

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

Пример

Ајде да направиме така што при кликнување на копчето пораката да се испише во конзолата само еднаш. За ова ќе го искористиме третиот параметар:

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

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

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

Пример

Параметарот passive го забранува повикувањето на методот event.preventDefault при обработка на настанот. Ајде на претходниот пример да го примениме методот event.preventDefault, а исто така да наведеме во параметарот passive вредност 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
	}
);

По извршувањето на кодот ќе ги видиме следните пораки:

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

Пример

Параметарот useCapture со вредност true го прикажува подигањето на настаните од внатрешниот елемент до надворешниот, додека со вредност false - од надворешниот до внатрешниот елемент. При пренос на параметарот useCapture неговото име се испушта и се запишува едноставно true или false. Ајде да погледнеме како се подигаат настаните во родителскиот и во детскиот елемент при кликнување на нив:

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

Погледнете исто така

методот removeEventListener,
кој го откачува настанот од елементот