addEventListener metodu

addEventListener metodu elementə hadisə işləyiciləri təyin etməyə imkan verir. Onun köməyi ilə, məsələn, düyməyə kliklənəndə nə etməli və ya mətn sahəsinə mətn daxil ediləndə nə etməli olduğunu göstərmək olar. Birinci parametrdə ötürülən hadisənin tipini, ikincidə isə birinci parametrdə göstərilən hadisədən sonra işləyəcək funksiyanı göstəririk. Üçüncü isteğe bağlı parametrdə obyektin xüsusiyyətlərini (once, capture, passive) və ya useCapture parametrini ötürürük.

Sintaksis

element.addEventListener('hadisə tipi', funksiya, [obyekt xüsusiyyətləri]);
və ya
element.addEventListener('hadisə tipi', funksiya, [useCapture]);

Nümunə

Gəlin elə edək ki, düyməyə kliklənəndə mesaj çıxsın:

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

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

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

Nümunə

Gəlin kodu yazaq ki, inputda fokus itiriləndə həmin inputun mətni olan mesaj çıxsın:

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

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

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

Nümunə

Gəlin elə edək ki, düyməyə kliklənəndə mesaj konsola yalnız bir dəfə çıxsın. Bunun üçün ikinci parametrdən istifadə edək:

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

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

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

Nümunə

passive parametri hadisə işlənərkən event.preventDefault metodunun çağırılmasını qadağan edir. Gəlin əvvəlki nümunəyə event.preventDefault metodunu tətbiq edək, həmçinin passive parametrində true qiymətini göstərək:

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

Kodu icra etdikdən sonra biz aşağıdakı mesajları görəcəyik:

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

Nümunə

useCapture parametri true qiymətində hadisələrin daxili elementdən xariciyə doğru qalxmasını, false qiymətində isə xaricidən daxiliyə doğru qalxmasını göstərir. useCapture parametri ötürülərkən onun adı buraxılır və sadəcə true və ya false yazılır. Gəlin onlara kliklənəndə valideyn və uşaq elementlərində hadisələrin necə qalxdığına baxaq:

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

Həmçinin bax

elementdən hadisəni ayıran removeEventListener metodu