addEventListener metodi

addEventListener metodi elementga hodisa ishlovchilarni tayinlash imkonini beradi. Uning yordamida, masalan, tugmacha bosilganda nima qilish kerakligini yoki matn maydonchasi yozilayotganda nima qilish kerakligini belgilash mumkin. Birinchi parametrda hodisa turi ko'rsatiladi, ikkinchisida - birinchi parametrda ko'rsatilgan hodisadan keyin ishlaydigan funksiya. Uchinchi ixtiyoriy parametrda obyekt xususiyatlari (once, capture, passive) yoki useCapture parametri o'tkaziladi.

Sintaksis

element.addEventListener('hodisa turi', funksiya, [obyekt xususiyatlari]);
yoki
element.addEventListener('hodisa turi', funksiya, [useCapture]);

Misol

Tugmachaga bosilganda xabar chiqadigan qilaylik:

<input type="button" id="button" value="menga bosing">

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

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

Misol

Input fokusni yo'qotganda, shu inputning matni bilan xabar chiqadigan kod yozaylik:

<input id="input" value="matn">

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

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

Misol

Tugmacha bosilganda xabar faqat bir marta konsolga chiqadigan qilaylik. Buning uchun ikkinchi parametrdan foydalanamiz:

<input type="button" id="button" value="menga bosing">

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

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

Misol

passive parametri hodisani qayta ishlash paytida event.preventDefault metodini chaqirishni taqiqlaydi. Oldingi misolda event.preventDefault metodini qo'llaymiz, shuningdek passive parametrida true qiymatini ko'rsatamiz:

<input type="button" id="button" value="menga bosing">

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

button.addEventListener('click',
	function(event) {
		event.preventDefault();
		console.log('Xabar yo‘q');
	},
	{
		passive: true
	}
);

Kod bajarilgandan keyin quyidagi xabarlarni ko'ramiz:

'Xabar yo‘q';
'Unable to preventDefault inside passive event listener invocation.'

Misol

useCapture parametri true qiymatida hodisalarning ichki elementdan tashqi elementgacha qanday ko'tarilishini (bubbling) ko'rsatadi, false qiymatida - tashqi elementdan ichki elementgacha qanday ko'tarilishini ko'rsatadi. useCapture parametri o'tkazilganda uning nomi o'tkazilmaydi va shunchaki true yoki false yoziladi. Keling, ota va farzand elementlariga ularni bosilganda hodisalar qanday ko'tarilishini ko'rib chiqaylik:

<div id="parent">Ota
	<p id="child">Farzand</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('ota'), 
	true
);
child.addEventListener('click',
	() => alert('farzand'), 
	true
);

Shuningdek qarang

removeEventListener metodi,
bu elementdan hodisani olib tashlaydi