Cara Menambahkan Event Click pada Div dengan JavaScript
Dalam pengembangan web, seringkali kita ingin melakukan tindakan tertentu saat pengguna mengklik sebuah elemen HTML. Salah satu elemen yang sering digunakan adalah div. Pada artikel ini, kita akan mempelajari cara menambahkan event click pada div dengan JavaScript.
Metode 1: Menggunakan Event Listener
Metode ini merupakan cara yang paling umum dan fleksibel untuk menambahkan event listener pada elemen HTML.
1. Mendapatkan Elemen Div
Pertama, kita perlu mendapatkan referensi ke elemen div yang ingin kita tambahkan event click-nya. Kita dapat melakukannya dengan menggunakan metode getElementById() atau querySelector().
// Mendapatkan elemen div dengan id "myDiv"
const myDiv = document.getElementById("myDiv");
// Mendapatkan elemen div dengan selector "div.myClass"
const myDiv = document.querySelector("div.myClass");
2. Menambahkan Event Listener
Setelah mendapatkan referensi ke div, kita dapat menambahkan event listener menggunakan metode addEventListener(). Metode ini menerima dua parameter: nama event dan fungsi callback yang akan dijalankan ketika event terjadi.
myDiv.addEventListener("click", function() {
// Kode yang akan dijalankan saat div diklik
console.log("Div diklik!");
});
Metode 2: Menggunakan Atribut onclick
Metode ini lebih sederhana dan dapat digunakan langsung dalam HTML.
1. Menambahkan Atribut onclick
Kita dapat menambahkan atribut onclick pada elemen div dan memberikan nilai berupa JavaScript function yang akan dijalankan saat div diklik.
Klik di sini!
Contoh Penerapan
Berikut adalah contoh kode lengkap untuk menambahkan event click pada div dan menampilkan pesan ke console:
Event Click pada Div
Klik di sini!
Kesimpulan
Menambahkan event click pada div di JavaScript sangat mudah dan fleksibel. Kita dapat menggunakan metode event listener atau atribut onclick untuk melakukan tindakan tertentu saat pengguna mengklik div. Pilih metode yang paling sesuai dengan kebutuhan dan struktur kode Anda.