Menambahkan Event Click dengan JavaScript
Event click adalah salah satu event yang paling umum digunakan dalam JavaScript. Event ini dipicu ketika pengguna mengklik elemen HTML. Menambahkan event click pada elemen HTML dapat digunakan untuk berbagai tujuan, seperti menjalankan fungsi, mengubah tampilan, atau mengirimkan data ke server.
Cara Menambahkan Event Click
Ada beberapa cara untuk menambahkan event click pada elemen HTML menggunakan JavaScript:
1. Menggunakan Atribut onclick
Cara termudah untuk menambahkan event click adalah dengan menggunakan atribut onclick langsung pada elemen HTML. Atribut ini menerima nilai berupa kode JavaScript yang akan dieksekusi ketika elemen tersebut diklik.
2. Menggunakan Method addEventListener()
Metode addEventListener() merupakan cara yang lebih fleksibel dan terstruktur untuk menambahkan event listener pada elemen HTML. Metode ini menerima dua parameter: jenis event (dalam hal ini click) dan fungsi yang akan dieksekusi ketika event terjadi.
const tombol = document.getElementById('tombol');
tombol.addEventListener('click', function() {
alert('Tombol diklik!');
});
3. Menggunakan Event Handler Inline
Anda juga dapat menggunakan event handler inline untuk menambahkan event click pada elemen HTML. Event handler inline adalah fungsi anonim yang didefinisikan langsung dalam atribut HTML.
Contoh Penggunaan
Berikut adalah beberapa contoh penggunaan event click dalam JavaScript:
1. Menampilkan Pesan Alert
2. Mengubah Tampilan Elemen
3. Mengirim Data ke Server
Kesimpulan
Event click merupakan event yang penting dalam pengembangan web. Dengan memahami cara menambahkan event click pada elemen HTML, Anda dapat membuat website yang interaktif dan responsif.