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 методу,
окуяны элементтен ажыратат