Banyak aplikasi web mengandalkan beberapa bentuk acara untuk menjalankan fungsinya. Pada titik tertentu, manusia berinteraksi dengan antarmuka mereka, yang menghasilkan suatu peristiwa. Peristiwa yang digerakkan oleh manusia ini biasanya bergantung pada perangkat periferal, seperti mouse atau keyboard.

Saat perangkat membuat acara, program dapat mendengarkannya, untuk mengetahui kapan harus melakukan perilaku tertentu. Dalam tutorial ini, Anda akan belajar cara mendengarkan acara menggunakan JavaScript.

Apa itu Pemrograman Berbasis Peristiwa?

Pemrograman yang digerakkan oleh peristiwa adalah nama paradigma yang mengandalkan eksekusi suatu peristiwa untuk menjalankan fungsinya. Dimungkinkan untuk membuat program yang digerakkan oleh peristiwa dalam bahasa pemrograman tingkat tinggi apa pun. Tetapi pemrograman berbasis peristiwa paling umum dalam bahasa seperti JavaScript yang terintegrasi dengan antarmuka pengguna.

Apa itu Pendengar Acara?

Pendengar peristiwa adalah fungsi yang memulai proses yang telah ditentukan sebelumnya jika peristiwa tertentu terjadi. Jadi, pendengar acara "mendengarkan" suatu tindakan, lalu memanggil fungsi yang melakukan tugas terkait. Acara ini dapat mengambil salah satu dari banyak bentuk. Contoh umum termasuk acara mouse, acara keyboard, dan acara jendela.

Membuat Event Listener Menggunakan JavaScript

Anda dapat mendengarkan acara di mana saja elemen di DOM. JavaScript memiliki tambahkanEventListener() fungsi yang dapat Anda panggil pada elemen apa pun di halaman web. Itu tambahkanEventListener() fungsi adalah metode dari AcaraTarget antarmuka. Semua objek yang mendukung acara mengimplementasikan antarmuka ini. Ini termasuk jendela, dokumen, dan elemen individu pada halaman.

Fungsi addEventListener() memiliki struktur dasar berikut:

element.addEventListener("acara", functionToExecute);

Di mana:

• itu elemen dapat mewakili tag HTML apa pun (dari tombol ke paragraf)
• itu "peristiwa" adalah string yang menamai tindakan tertentu yang dikenali
• itu fungsiUntukMengeksekusi adalah referensi ke fungsi yang ada

Mari kita buat halaman web berikut yang memiliki beberapa elemen HTML:

Selamat datang


 Halo, selamat datang di situs web saya.


Belajarlah lagi





Info Pengguna

Nama pengguna: 

Kirim

Kode HTML di atas membuat halaman sederhana yang menautkan ke file JavaScript yang disebut app.js. Itu app.js file akan berisi kode untuk menyiapkan pendengar acara. Jadi, jika Anda ingin memulai proses tertentu setiap kali pengguna mengklik tombol pertama di halaman web, ini adalah file untuk membuatnya.

File app.js

document.querySelector('.btn').addEventListener("klik", klikDemo)
fungsi klikDemo(){
 console.log("Halo")
}

Kode JavaScript di atas mengakses tombol pertama pada halaman menggunakan kueriPemilih() fungsi. Kemudian menambahkan pendengar acara ke elemen ini menggunakan tambahkanEventListener() metode. Acara khusus yang didengarkannya memiliki nama "klik". Saat tombol mengaktifkan peristiwa itu, pendengar akan memanggil klikDemo() fungsi.

Terkait: Pelajari Cara Menggunakan Pemilih DOM

Itu klikDemo() fungsi mencetak "Hai di sana" ke konsol browser. Setiap kali Anda mengklik tombol, Anda akan melihat output ini di konsol Anda.

Output Acara "klik"

Apa Itu Acara Mouse?

JavaScript memiliki Acara Tikus antarmuka yang mewakili peristiwa yang terjadi karena interaksi pengguna dengan mouse mereka. Beberapa acara menggunakan Acara Tikus antarmuka. Acara-acara tersebut antara lain sebagai berikut:

• klik
• klik dbl
• gerakan mouse
• gerakan mouse
• mouseout
• mouse up
• mouse ke bawah

Itu klik peristiwa terjadi ketika pengguna menekan dan melepaskan tombol mouse saat penunjuknya berada di atas elemen. Inilah yang terjadi pada contoh sebelumnya. Seperti yang dapat Anda lihat dari daftar di atas, kejadian mouse dapat mengambil banyak bentuk.

Acara mouse umum lainnya adalah klik dbl, yang merupakan singkatan dari klik dua kali. Ini menyala ketika pengguna mengklik tombol mouse dua kali berturut-turut dengan cepat. Hal yang luar biasa tentang tambahkanEventListener() fungsinya adalah Anda dapat menggunakannya untuk menetapkan beberapa pendengar acara ke satu elemen.

Menambahkan Acara dblclick ke Tombol Pertama

document.querySelector('.btn').addEventListener("dblclick", dblclickDemo)
fungsi dblclickDemo(){
 alert("Ini adalah demonstrasi cara membuat event klik dua kali")
}

Menambahkan kode di atas ke file app.js akan secara efektif membuat event listener kedua untuk tombol pertama di halaman web. Jadi, mengklik tombol pertama dua kali akan membuat peringatan berikut di browser:

Pada gambar di atas Anda akan melihat lansiran yang dihasilkan, dan Anda juga akan melihat bahwa dua lagi keluaran "Hai di sana" ada di konsol. Ini karena acara klik dua kali adalah kombinasi dari dua acara klik dan ada pendengar acara untuk keduanya klik dan klik dbl acara.

Nama-nama peristiwa mouse lainnya dalam daftar menggambarkan perilaku mereka. Itu gerakan mouse event terjadi setiap kali pengguna menggerakkan mouse mereka saat kursor berada di atas elemen. Itu mouse up event terjadi ketika pengguna menahan tombol di atas elemen, lalu melepaskannya.

Apa Itu Acara Keyboard?

JavaScript memiliki Acara Keyboard antarmuka. Ini mendengarkan interaksi antara pengguna dan keyboard mereka. Di masa lalu, Acara Keyboard memiliki tiga jenis acara. Namun, sejak saat itu JavaScript tidak lagi menggunakan penekanan tombol peristiwa.

Sehingga keyup dan kunci bawah acara adalah satu-satunya dua acara keyboard yang direkomendasikan, yang Anda butuhkan. Itu kunci bawah peristiwa terjadi ketika pengguna menekan tombol, dan keyup peristiwa terjadi ketika pengguna melepaskannya.

Meninjau kembali contoh HTML di atas, tempat terbaik untuk menambahkan pendengar acara keyboard adalah di memasukkan elemen.

Menambahkan Pendengar Acara Keyboard ke File app.js

let salam = document.querySelector('p');
document.querySelector('input').addEventListener("keyup", captureInput)
fungsi captureInput (e){
 salam.innerText = (`Halo ${e.target.value}, selamat datang di situs web saya.`)
}

Kode di atas menggunakan kueriPemilih() berfungsi untuk mengakses paragraf dan memasukkan elemen pada halaman. Ia kemudian memanggil tambahkanEventListener() metode pada memasukkan elemen, yang mendengarkan keyup peristiwa. Kapanpun keyup peristiwa terjadi, tangkap masukan() function mengambil nilai kunci dan menambahkannya ke paragraf di halaman. Itu e parameter mewakili acara, yang ditetapkan JavaScript secara otomatis. Objek acara ini memiliki properti, target, yang merupakan referensi ke elemen yang berinteraksi dengan pengguna.

Dalam contoh ini, label yang dilampirkan pada memasukkan bidang meminta nama pengguna. Jika Anda mengetikkan nama Anda di kolom input, maka halaman web akan terlihat seperti ini:

Paragraf sekarang berisi nilai input yang, dalam contoh di atas, adalah "Jane Doe".

addEventListener Menangkap Segala Macam Interaksi Pengguna

Artikel ini memperkenalkan Anda pada tambahkanEventListener() metode, serta beberapa acara mouse dan keyboard yang dapat Anda gunakan dengannya. Pada titik ini, Anda tahu cara mendengarkan acara tertentu, dan cara membuat fungsi yang meresponsnya.

Itu tambahkanEventListener memberikan kemampuan ekstra, bagaimanapun, melalui parameter ketiganya. Anda dapat menggunakannya untuk mengontrol propagasi peristiwa: urutan peristiwa berpindah dari elemen ke orang tua atau anak-anak mereka.

Memahami Propagasi Acara dalam JavaScript

Acara adalah fitur JavaScript yang kuat. Memahami bagaimana browser web memunculkannya terhadap elemen adalah kunci untuk menguasai penggunaannya.

Baca Selanjutnya

Tentang Penulis