addEventListener әдісі

addEventListener әдісі элементке оқиғаларды өңдеушілерді тағайындауға мүмкіндік береді. Оның көмегімен, мысалы, батырманы басқанда не істеу керектігін немесе мәтін өрісіне мәтін енгізгенде не істеу керектігін көрсетуге болады. Бірінші параметрде берілетін оқиғаның түрін көрсетеміз, екіншісінде - бірінші параметрде көрсетілген оқиға орын алғаннан кейін орындалатын функция. Үшінші міндетті емес параметрде объект сипаттамаларын (once, capture, passive) немесе useCapture параметрін береміз.

Синтаксис

элемент.addEventListener('оқиға түрі', функция, [объект сипаттамалары]);
немесе
элемент.addEventListener('оқиға түрі', функция, [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 әдісі,
ол элементтен оқиғаны ажыратады