Pengenalan Event Handler Untuk Interaktifitas

Event handler digunakan dalam JavaScript untuk menangani interaksi pengguna dengan elemen HTML. Ini memungkinkan kita untuk merespons terhadap tindakan pengguna seperti mengklik tombol, menggerakkan mouse, mengetik di keyboard, dan banyak lagi.

Berikut adalah cara penggunaan event handler dalam JavaScript:

1. Event Listener dengan addEventListener:

// Memilih elemen dengan ID "myButton"
let button = document.getElementById("myButton");

// Menambahkan event listener untuk klik tombol
button.addEventListener("click", function() {
    alert("Tombol diklik!");
});

2. Event Inline (langsung pada elemen HTML):

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

3. Event Handler dalam Tag Script:

<!-- HTML -->
<button id="myButton">Klik Saya</button>

<script>
    // Memilih elemen dengan ID "myButton"
    let button = document.getElementById("myButton");

    // Menambahkan event handler untuk klik tombol
    button.onclick = function() {
        alert("Tombol diklik!");
    };
</script>

Dalam contoh di atas, ketika tombol di klik, pesan "Tombol diklik!" akan muncul. Anda dapat menggantikan alert() dengan fungsi atau aksi yang diinginkan.

Ini hanya beberapa contoh penggunaan event handler dalam JavaScript. Dengan event handler, Anda dapat membuat aplikasi web yang lebih interaktif dan responsif terhadap tindakan pengguna.