Metode addEventListener

Metode addEventListener memungkinkan untuk menetapkan penangan event pada elemen. Dengan menggunakannya, Anda dapat menentukan, misalnya, apa yang harus dilakukan saat mengklik tombol atau apa yang harus dilakukan saat mengetik teks dalam bidang teks. Pada parameter pertama, tentukan jenis event yang diteruskan, pada parameter kedua - fungsi yang akan dijalankan setelah event yang ditentukan pada parameter pertama. Pada parameter ketiga yang opsional, teruskan karakteristik objek (once, capture, passive) atau parameter useCapture.

Sintaksis

elemen.addEventListener('jenis event', fungsi, [karakteristik objek]);
atau
elemen.addEventListener('jenis event', fungsi, [useCapture]);

Contoh

Mari kita buat agar saat mengklik tombol, pesan ditampilkan:

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

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

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

Contoh

Mari kita tulis kode agar saat kehilangan fokus pada input, pesan dengan teks dari input tersebut ditampilkan:

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

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

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

Contoh

Mari kita buat agar saat mengklik tombol, pesan hanya ditampilkan di konsol sekali saja. 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 pemanggilan metode event.preventDefault saat menangani event. Mari kita terapkan metode event.preventDefault pada contoh sebelumnya, dan juga tentukan nilai true pada parameter passive:

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

Setelah kode dijalankan kita akan melihat pesan berikut:

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

Contoh

Parameter useCapture dengan nilai true menunjukkan bubbling event dari elemen dalam ke elemen luar, sedangkan dengan nilai false - dari elemen luar ke elemen dalam. Saat meneruskan parameter useCapture, namanya dihilangkan dan hanya ditulis true atau false. Mari kita lihat bagaimana event bubbling pada elemen induk dan anak saat mengkliknya:

<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

metode removeEventListener,
yang melepas event dari elemen