Bagian 12: Event Handling Lanjutan

Interaksi pengguna sangat penting dalam web modern. JavaScript menyediakan cara untuk merespons aksi pengguna menggunakan event handling, yang akan kita bahas secara bertahap di bagian ini.

Apa Itu Event Handling?

Event handling memungkinkan kita menjalankan kode JavaScript saat terjadi aksi oleh pengguna, seperti klik tombol, hover mouse, input teks, dan lain-lain.

Contoh Event Handler dengan atribut HTML

<button onclick="tampilPesan()">Klik Aku</button>

<script>
function tampilPesan() {
  alert("Tombol diklik!");
}
</script>

Simulator Mini

Event Listener di JavaScript

Kita juga bisa menambahkan event listener dengan JavaScript tanpa mengubah HTML.

<button id="btn" >Klik Aku</button>

<script>
document.getElementById("btn").addEventListener("click", function() {
  alert("Tombol diklik dengan event listener!");
});
</script>

Simulator Mini

Selanjutnya, kita akan mempelajari lebih dalam bagaimana memanipulasi elemen DOM berdasarkan event yang terjadi.