Mengikat Pengendali kepada Elemen dalam JavaScript

Sekarang mari kita ajar elemen DOM kita untuk bertindak balas kepada tindakan pengguna laman web. Sebagai contoh, pengguna mengklik di suatu tempat dengan tetikus, dan kod kita sebagai balasan perlu memproses klik tersebut dan memaparkan maklumat tertentu di skrin.

Tindakan pengguna yang boleh kita kesan melalui JavaScript dipanggil peristiwa. Peristiwa boleh terdiri daripada: klik tetikus pada elemen halaman, menghala tetikus ke atas elemen halaman atau sebaliknya - penunjuk tetikus meninggalkan elemen, dan sebagainya. Selain itu, terdapat peristiwa yang tidak bergantung pada tindakan pengguna, contohnya, peristiwa apabila halaman HTML dimuatkan ke dalam pelayar.

Mari kita buat satu butang sebagai contoh, yang apabila ditekan beberapa teks akan dipaparkan di skrin. Pertama, mari buat kod HTML untuk butang:

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

Sekarang dapatkan pautan ke butang tersebut ke dalam pembolehubah:

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

Sekarang kita perlu menetapkan tindak balas butang kita apabila diklik. Untuk ini, JavaScript mempunyai kaedah khas addEventListener, parameter pertamanya menerima nama peristiwa (klik pada butang mempunyai nama 'click'), dan parameter kedua - fungsi panggilan balik, yang dijalankan apabila peristiwa itu berlaku.

Sebagai contoh, mari kita paparkan beberapa teks apabila butang diklik:

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

Diberi 3 butang:

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

Lakukan supaya apabila butang pertama diklik nombor 1 dipaparkan di skrin, apabila butang kedua diklik - nombor 2, dan apabila butang ketiga diklik - nombor 3.