Mengenal Cara Kerja Penanganan Kejadian (Event) di JavaScript

4
(260 votes)

JavaScript memungkinkan interaksi dinamis dengan halaman web melalui penanganan kejadian (event). Kejadian adalah aksi yang terjadi pada elemen HTML, seperti klik mouse, penekanan tombol, atau perubahan nilai input. Penanganan kejadian melibatkan penggunaan fungsi yang dieksekusi ketika kejadian tertentu terjadi. Ada beberapa cara untuk menangani kejadian di JavaScript. Cara tradisional menggunakan atribut `on*` langsung pada elemen HTML, misalnya ` <button onclick="myFunction()" >Klik Saya </button >`. Namun, cara ini kurang disukai karena mencampur kode HTML dan JavaScript, membuat kode sulit dibaca dan dipelihara. Metode yang lebih modern dan direkomendasikan adalah menggunakan metode `addEventListener()`. Metode ini lebih fleksibel karena memungkinkan penambahan beberapa fungsi penanganan kejadian pada satu elemen, dan juga memungkinkan penghapusan fungsi tersebut. Contohnya: ```javascript const tombol = document.getElementById("myButton"); tombol.addEventListener("click", myFunction); function myFunction() { alert("Tombol diklik!"); } ``` Kode di atas menambahkan fungsi `myFunction()` sebagai pendengar kejadian "click" pada elemen dengan ID "myButton". Ketika tombol diklik, fungsi `myFunction()` akan dieksekusi. `addEventListener()` menerima tiga argumen: tipe kejadian (string), fungsi yang akan dieksekusi, dan secara opsional, `useCapture` (boolean). Memahami cara kerja penanganan kejadian sangat penting dalam pengembangan web interaktif. Dengan menguasai teknik ini, kita dapat menciptakan pengalaman pengguna yang lebih dinamis dan responsif. Kemampuan untuk menambahkan, menghapus, dan mengelola pendengar kejadian memberikan kontrol yang lebih besar atas perilaku halaman web, membuka jalan bagi pembuatan aplikasi web yang lebih kompleks dan canggih. Mempelajari berbagai tipe event dan cara mengolahnya akan meningkatkan kemampuan pemrograman JavaScript Anda secara signifikan.