Kaedah addEventListener

Kaedah addEventListener membolehkan anda menetapkan pengendali acara pada elemen. Dengannya, anda boleh menentukan, sebagai contoh, apa yang perlu dilakukan apabila mengklik butang atau apa yang perlu dilakukan semasa menaip teks dalam medan teks. Parameter pertama menentukan jenis acara yang dilalui, parameter kedua - fungsi yang akan dicetuskan selepas acara yang dinyatakan dalam parameter pertama. Parameter ketiga yang pilihan menghantar ciri-ciri objek (once, capture, passive) atau parameter useCapture.

Sintaks

elemen.addEventListener('jenis acara', fungsi, [ciri-ciri objek]);
atau
elemen.addEventListener('jenis acara', fungsi, [useCapture]);

Contoh

Mari kita buat supaya apabila mengklik butang, mesej akan dipaparkan:

<input type="button" id="button" value="click me">

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

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

Contoh

Mari kita tulis kod supaya apabila kehilangan fokus pada input, mesej dengan teks daripada input tersebut dipaparkan:

<input id="input" value="text">

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

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

Contoh

Mari kita buat supaya apabila mengklik butang, mesej dipaparkan dalam konsol hanya sekali. Untuk ini, kita akan menggunakan parameter kedua:

<input type="button" id="button" value="click me">

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

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

Contoh

Parameter passive melarang memanggil kaedah event.preventDefault semasa memproses acara. Mari kita gunakan kaedah event.preventDefault pada contoh sebelumnya, dan juga tentukan dalam parameter passive nilai 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
	}
);

Selepas melaksanakan kod kita akan melihat mesej berikut:

'No message';
'Unable to preventDefault inside passive event listener invocation.'

Contoh

Parameter useCapture dengan nilai true menunjukkan gelembung acara dari elemen dalaman ke luaran, dengan nilai false - dari luaran ke elemen dalaman. Apabila menghantar parameter useCapture, namanya ditinggalkan dan hanya ditulis true atau false. Mari kita lihat bagaimana acara menggelembung dalam elemen induk dan anak apabila mengklik pada mereka:

<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
);

Lihat juga

kaedah removeEventListener,
yang melepaskan acara dari elemen