ONCLICK PADA JAVASCRIPT

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 Menggunakan onclick

Menggunakan Inline Event

Cara paling sederhana adalah menggunakan event onclick langsung pada elemen HTML.

<button onclick="alert('Tombol diklik!')">Klik Saya</button>

Menggunakan Event Listener

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>

Menggunakan onclick dengan Berbagai Elemen

Pada Gambar

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>

Pada Tautan

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>

Mengikat Event Listener dengan addEventListener

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.

Kesimpulan

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.