Penanganan Pengikatan ke Elemen dalam JavaScript

Sekarang mari kita ajarkan elemen DOM kita untuk bereaksi terhadap tindakan pengguna situs. Misalnya, pengguna mengklik di suatu tempat dengan mouse, dan kode kita sebagai respons harus menangani klik tersebut dan menampilkan beberapa informasi di layar.

Tindakan pengguna yang dapat kita lacak melalui JavaScript disebut event (peristiwa). Event dapat berupa berikut: klik mouse pada elemen halaman, mengarahkan mouse ke elemen halaman atau sebaliknya - saat kursor mouse meninggalkan elemen, dan sebagainya. Selain itu, ada event yang tidak bergantung pada tindakan pengguna, misalnya, event saat halaman HTML selesai dimuat di browser.

Sebagai contoh, mari kita buat sebuah tombol, yang ketika ditekan akan menampilkan beberapa teks di layar. Pertama, mari kita buat kode HTML untuk tombolnya:

<input id="button" type="submit">

Sekarang dapatkan referensi ke tombol tersebut ke dalam variabel:

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

Sekarang kita perlu mengatur reaksi tombol kita saat diklik. Untuk ini, dalam JavaScript ada metode khusus addEventListener, parameter pertamanya menerima nama event (klik pada tombol memiliki nama 'click'), dan parameter kedua - fungsi callback, yang dijalankan saat event tersebut terjadi.

Misalnya, saat tombol diklik, mari kita tampilkan beberapa teks:

button.addEventListener('click', function() {
	console.log('!!!');
});

Ada 3 tombol:

<input id="button1" type="submit">
<input id="button2" type="submit">
<input id="button3" type="submit">

Atur sedemikian rupa sehingga ketika tombol pertama diklik angka 1 ditampilkan di layar, ketika tombol kedua diklik - angka 2, dan ketika tombol ketiga diklik - angka 3.