Njia addEventListener

Njia addEventListener inaruhusu kuweka wakaguzi wa matukio kwenye kipengee. Kwa kuitumia, unaweza kubainisha, kwa mfano, nini cha kufanya wakati wa kubofya kitufe au nini cha kufanya wakati wa kuandika maandishi kwenye uga wa maandishi. Katika parameta ya kwanza tunabainisha aina ya tukio, ya pili - kitendakazi ambacho kitafanya kazi baada ya tukio lililobainishwa katika parameta ya kwanza. Katika parameta ya tatu ya hiari tunapeana sifa za kitu (once, capture, passive) au parameta useCapture.

Kisarufu

kipengee.addEventListener('aina ya tukio', kitendakazi, [sifa za kitu]);
au
kipengee.addEventListener('aina ya tukio', kitendakazi, [useCapture]);

Mfano

Wacha tufanye ili wakati wa kubofya kitufe itoe ujumbe:

<input type="button" id="button" value="nibonye">

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

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

Mfano

Wacha tuandike msimbo, ili wakati wa kupoteza umakini kwenye kiingilio itoe ujumbe na maandishi ya hiyo kiingilio:

<input id="input" value="maandishi">

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

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

Mfano

Wacha tufanye ili wakati wa kubofya kitufe ujumbe utoe kwenye konzi mara moja tu. Kwa hili tutatumia parameta ya pili:

<input type="button" id="button" value="nibonye">

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

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

Mfano

Parameta passive inakataza kuita njia event.preventDefault wakati wa kushughulikia tukio. Wacha kwenye mfano uliopita tutumie njia event.preventDefault, na pia tubainishe kwenye parameta passive thamani true:

<input type="button" id="button" value="nibonye">

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

button.addEventListener('click',
	function(event) {
		event.preventDefault();
		console.log('Hakuna ujumbe');
	},
	{
		passive: true
	}
);

Baada ya kutekeleza msimbo tutaona ujumbe ufuatao:

'Hakuna ujumbe';
'Unable to preventDefault inside passive event listener invocation.'

Mfano

Parameta useCapture kwa thamani true inaonyesha matukio yanavyofika kutoka kipengee cha ndani hadi cha nje, kwa thamani false - kutoka kipengee cha nje hadi cha ndani. Wakati wa kupitisha parameta useCapture jina lake huachwa na kuandikwa tu true au false. Wacha tuone jinsi matukio yanavyofika kwenye kipengee kizazi na kipengee kizaliwa wakati wa kubofya juu yao:

<div id="parent">Mzazi
	<p id="child">Mtoto</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('mzazi'), 
	true
);
child.addEventListener('click',
	() => alert('mtoto'), 
	true
);

Angalia pia

Njia removeEventListener,
ambayo huatua tukio kutoka kwa kipengee