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 кийматini берамиз:

<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 методи,
у элементдан вокеани боглаб кўяди