Memahami Event di Javascript

Dalam setiap pengembangan web, interaksi dengan pengguna sangat penting untuk memberikan pengalaman yang interaktif dan responsif. JavaScript menyediakan konsep event untuk menangani interaksi tersebut. Event terjadi ketika pengguna melakukan tindakan tertentu, seperti mengklik tombol, memasukkan teks, atau menggulir halaman. Dalam artikel ini, kita akan menjelajahi event dalam JavaScript dan bagaimana mereka dapat digunakan untuk membuat aplikasi web yang interaktif.

Apa itu Event?

Dalam JavaScript, event itu tindakan atau kejadian yang terjadi dalam halaman web. Kejadian ini dapat disebabkan oleh pengguna, seperti mengklik mouse atau menekan tombol keyboard, atau dapat terjadi secara otomatis, seperti halaman selesai dimuat atau waktu tertentu telah berlalu.

JavaScript memungkinkan Anda untuk menangani event dengan menetapkan fungsi (disebut event handler) untuk dijalankan ketika event terjadi. Event handler akan merespons event dengan melakukan tugas tertentu, seperti memperbarui tampilan halaman, mengirim data ke server, atau menjalankan animasi.

Contoh Event

Berikut adalah beberapa contoh event umum dalam JavaScript:

1. click: Terjadi ketika pengguna mengklik elemen HTML.
2. submit: Terjadi ketika formulir HTML dikirim.
3. keydown/keyup: Terjadi ketika pengguna menekan atau melepaskan tombol keyboard.
4. load: Terjadi ketika halaman atau elemen HTML selesai dimuat.
5. mouseover/mouseout: Terjadi ketika kursor mouse bergerak ke atas atau keluar dari elemen HTML.
6. scroll: Terjadi ketika pengguna menggulir halaman web.

Menangani Event dengan JavaScript

Untuk menangani event, Anda perlu memilih elemen HTML yang akan Anda tangani dan menetapkan event handler ke elemen tersebut. Anda dapat melakukannya dengan menggunakan metode addEventListener() pada elemen tersebut.

Berikut adalah contoh penggunaan addEventListener() untuk menangani event click:

const tombol = documentGetElementById('tombol');

tombol.addEventlistener('click',function(){

    console.log("tombol di klik");

);