Jika Anda ingin membuat aplikasi web dinamis yang interaktif, JavaScript adalah salah satu bahasa pemrograman teratas. Dasar dari interaktivitas tersebut adalah penanganan event. Event adalah tindakan atau kejadian yang terjadi di dalam browser, seperti pengguna mengklik tombol atau pengguna mengetikkan input teks atau menggerakkan mouse. JavaScript dapat mendengarkan peristiwa ini dan menjalankan beberapa kode yang sesuai, yang dimungkinkan melalui penggunaan jaring pengaman yang dikenal sebagai pendengar peristiwa.
Apa yang dimaksud dengan Peristiwa JavaScript?
Dalam pengembangan web, event adalah segala sesuatu yang terjadi di browser. Interaksi ini dapat diprakarsai oleh pengguna, seperti mengklik tombol atau mengirimkan formulir, atau diprakarsai oleh browser itu sendiri, seperti ketika halaman selesai dimuat. Hal ini memungkinkan Anda untuk memeriksa apa yang sedang terjadi dan mengubah perilaku secara dinamis, membuat semuanya menjadi interaktif.
Sumber: jefrydco.id
Jenis Peristiwa Umum
1. Peristiwa Mouse: Ini adalah peristiwa yang terjadi dengan interaksi mouse dari pengguna.
- Klik: Dipanggil ketika sebuah elemen diklik.
- dblclick: Peristiwa ini ditembakkan ketika klik dua kali dilakukan.
- mousemove: Dipicu saat mouse bergerak di atas elemen.
- All mousedown dan mouseup: Dipicu saat tombol mouse turun atau naik.
2. Peristiwa Keyboard: Peristiwa ini dipicu oleh interaksi keyboard
- keydown: Dipicu saat tombol ditekan ke bawah.
- keyup: Ketika beberapa tombol dilepaskan pada keyboard.
- keypress: Tidak digunakan lagi, tetapi digunakan untuk menentukan tombol shen ditekan.
3. Kejadian Formulir: Jenis kejadian ini digunakan ketika pengguna berinteraksi dengan formulir Anda.
- submit: Ditembakkan ketika formulir dikirimkan.
- change: Ditembakkan ketika nilai elemen input diubah.
- fokus dan kabur: ketika elemen mendapatkan atau kehilangan fokus.
4. Peristiwa Jendela: Peristiwa-peristiwa ini berkaitan dengan jendela browser.
- load: Ketika seluruh halaman dimuat, termasuk semua sumber daya
- ubah ukuran: Dipicu ketika jendela diubah ukurannya.
- scroll: Dipanggil untuk menandakan bahwa pengguna menggulir halaman.
Apa yang dimaksud dengan Pendengar Peristiwa?
Pendengar peristiwa adalah fitur JavaScript yang memungkinkan Anda diberi tahu tentang peristiwa tertentu, bersama dengan fungsi yang perlu dipicu dengan peristiwa tersebut. Anda dapat mendengarkan peristiwa, dan berdasarkan interaksi/aktivitas penjelajahan pengguna dan menentukan bagaimana aplikasi Anda harus berperilaku.
Menambahkan Pendengar Peristiwa
Cara standar untuk melampirkan pendengar peristiwa ke sebuah elemen adalah dengan menggunakan metode addEventListener. Sintaksnya adalah sebagai berikut:
element.addEventListener(event, callback, useCapture);
- event: Nama peristiwa yang akan didengarkan (misalnya, klik, keydown).
- callback: Fungsi yang akan dijalankan ketika peristiwa dipicu.
- useCapture (opsional): Boolean yang mengindikasikan apakah peristiwa harus ditangkap selama fase penangkapan (true) atau fase penggelembungan (false).
Contoh Pendengar Peristiwa
Contoh Dengan Pendengar Peristiwa untuk Klik Tombol:
const button = document.getElementById('myButton');
button.addEventListener('click', function() {
alert('Button was clicked!');
});
Pada contoh ini, kotak peringatan akan ditampilkan ketika pengguna mengklik tombol dengan id = “myButton”: --> contoh fungsi function myFunction() { alert(“Hello World”); contoh .
Menghapus Pendengar Peristiwa
Metode removeEventListener() menghapus pendengar peristiwa sehingga tidak lagi menghabiskan waktu untuk menggelembung ke atas atau ke bawah DOM. Untuk melakukan hal ini, Anda perlu mereferensikan fungsi yang sama persis dengan yang digunakan ketika pendengar ditambahkan:
function handleClick() {
alert('Button was clicked!');
}
button.addEventListener('click', handleClick);
button.removeEventListener('click', handleClick);
Perambatan Peristiwa
Ketika sebuah peristiwa terjadi pada sebuah elemen, peristiwa tersebut tidak berhenti sampai di situ. Ada dua fase untuk menangani peristiwa melalui DOM yang berjalan sebagai berikut:
- Fase Penangkapan: Peristiwa merambat ke bawah dari elemen akar menuju elemen target.
- Fase penggelembungan: Peristiwa merambat ke atas dari elemen target ke elemen akar.
Sebagian besar peristiwa menggunakan fase menggelembung secara default. Namun Anda dapat mengaturnya untuk menggunakan fase penangkapan dengan menggunakan parameter useCapture di addEventListener dan mengaturnya ke true.
Menghentikan Perambatan Peristiwa
Anda dapat mencegah event menggelembungkan DOM menggunakan metode stopPropagation:
button.addEventListener('click', function(event) {
event.stopPropagation();
alert('Propagation stopped!');
});
Kesimpulan
Event dan pendengar event adalah salah satu prinsip tulang punggung dalam membangun aplikasi web interaktif menggunakan JavaScript. Pengembang dapat membuat antarmuka yang merespons tindakan pengguna dengan benar dengan mempelajari cara bekerja dengan event. Anda dapat menggunakan alat bantu yang canggih ini untuk keuntungan Anda, baik itu mengklik tombol, mengirimkan formulir, atau memberikan penangan peristiwa pada peristiwa di jendela browser - tetapi proses ini adalah bagian yang sangat penting untuk menghasilkan halaman web yang efisien.
Kembali ke>>> Memulai dengan JavaScript: Dasar-dasarnya