DISKON TERBATAS! Masukkan kupon "skillbaru" saat checkout di kelas apa saja
Skodev
Belajar coding dalam bahasa Indonesia
Daftar Isi:
onclick
adalah salah satu event yang paling umum digunakan dalam JavaScript. Event ini memberikan fleksibilitas untuk menjalankan fungsi ketika elemen HTML diklik oleh pengguna.
Cara paling sederhana adalah menggunakan event onclick
langsung pada elemen HTML.
<button onclick="alert('Tombol diklik!')">Klik Saya</button>
Kamu juga bisa menambahkan event listener menggunakan JavaScript murni. Cara ini lebih dianjurkan karena menjaga HTML tetap bersih dan memisahkan logika dari markup.
<button id="tombol">Klik Saya</button>
<script>
document.getElementById('tombol').onclick = function() {
alert('Tombol diklik!');
};
</script>
Kamu bisa menambahkan event onclick pada gambar untuk memberikan efek atau tindakan tertentu.
<img src="gambar.jpg" alt="Gambar" onclick="ubahGambar()" />
<script>
function ubahGambar() {
document.querySelector('img').src = 'gambar_baru.jpg';
}
</script>
Jangan lupa, kamu juga bisa menggunakan onclick
pada tautan untuk memanipulasi atau bahkan mencegah aksi bawaan.
<a href="#" onclick="tampilPesan(); return false;">Tautan Berpindah</a>
<script>
function tampilPesan() {
alert('Tautan diklik!');
}
</script>
Selain onclick
, metode addEventListener
memberikan kontrol lebih untuk mengelola event.
<button id="tombol2">Klik Saya</button>
<script>
document.getElementById('tombol2').addEventListener('click', function() {
alert('Tombol diklik dengan addEventListener!');
});
</script>
Penggunaan addEventListener
memungkinkan kamu untuk menambahkan beberapa event listener ke elemen yang sama tanpa saling menimpa.
Event onclick
pada JavaScript adalah alat yang sangat kuat untuk meningkatkan interaksi pengguna di halaman web kamu. Baik menggunakan inline event, event listener, maupun addEventListener
, pilih metode yang paling sesuai dengan kebutuhan proyek kamu untuk hasil yang optimal.