Pembaca seperti Anda membantu mendukung MUO. Saat Anda melakukan pembelian menggunakan tautan di situs kami, kami dapat memperoleh komisi afiliasi. Baca selengkapnya.

Penanganan acara adalah konsep penting dalam JavaScript. Acara memungkinkan halaman HTML menjadi dinamis dan interaktif, memungkinkan Anda membuat antarmuka pengguna yang menarik. Anda dapat menulis kode untuk menjalankan JavaScript saat terjadi peristiwa di DOM.

Peristiwa dapat terjadi saat pengguna mengeklik elemen HTML, halaman dimuat, atau saat nilai bidang masukan berubah. Anda dapat menulis kode yang mengubah struktur HTML ketika suatu peristiwa terjadi. Pelajari tiga cara berbeda untuk menambahkan event listener ke kode Anda.

1. Metode addEventListener

Metode addEventListener adalah salah satu yang populer metode pendengar acara. Ini memiliki tiga parameter:

  • Objek yang mewakili kejadian.
  • Fungsi untuk menanganinya.
  • Sebuah boolean opsional, useCapture, yang menjelaskan bagaimana event menyebar ke seluruh DOM.

Acara dapat berupa acara DOM apa pun yang ditentukan pada elemen target. Suatu fungsi diatur untuk menanggapi peristiwa itu ketika itu terjadi.

instagram viewer

Fungsinya bisa anonim atau fungsi bernama. Target populer mencakup elemen, anak-anaknya, dokumen, dan jendela yang mendukung suatu peristiwa.

addEventListener() adalah metode yang disarankan untuk mengelola event listener dalam JavaScript. Ini berfungsi pada target acara apa pun, bukan hanya elemen HTML, dan mendukung banyak penangan acara.

Anda mungkin ingin mengeksekusi beberapa kode di DOM. Anda dapat mencetak teks, melakukan penghitungan, atau menampilkan gambar saat pengguna mengklik tombol.

Mari kita ilustrasikan dengan kode berikut:

html>
<html>
<tubuh>
<h1>Metode addEventListener Dengan Fungsih1>
<tombolpengenal="myBtn">Klik disinitombol>
<Ppengenal="demo">P>
tubuh>
html>

Selanjutnya, tambahkan pendengar acara menggunakan tombol.

const elemen = dokumen.getElementById("myBtn");
elemen.addEventListener("klik", Fungsiku1);
fungsimyFunction1() {
dokumen.getElementById("demo").innerHTML += "Fungsi dieksekusi! "
}

Ketika Anda mengklik tombol, teks 'Function Executed' tercetak di layar, seperti yang ditunjukkan di bawah ini.

2. Mendelegasikan Acara ke addEventListener

Mendelegasikan acara dalam JavaScript adalah pola yang digunakan untuk menangani banyak acara. Alih-alih menambahkan pendengar acara ke setiap elemen, Anda hanya menambahkan pendengar acara ke elemen leluhur. Anda dapat mengakses elemen yang memicu peristiwa tersebut melalui .target properti objek acara.

Ini memastikan bahwa semua elemen yang Anda targetkan memiliki perilaku yang sama. Tanpanya, Anda harus menambahkan pendengar acara ke masing-masing secara manual.

Berikut adalah contoh delegasi acara:

html>
<html>
<tubuh>
<h1> Delegasi Acara di Tombolh1>
<div>
<tombol>Tombol 1tombol>
<tombol>Tombol 2tombol>
<tombol>Tombol 3tombol>
div>
tubuh>
html>

Selanjutnya, tambahkan event listener ke semua tombol hanya dengan beberapa baris kode.

const div = dokumen.querySelector('div')
div.addEventListener("klik", (peristiwa) => {
jika (event.target.tagName 'TOMBOL') {
menghibur.catatan('Tombol diklik')
 }
});

Delegasi acara adalah pola yang didasarkan pada gelembung Acara. Gelembung peristiwa terjadi ketika elemen menerima peristiwa dan mengirimkannya ke elemen induk dan ancestornya di DOM. Ini adalah sebuah propagasi peristiwa konsep yang terjadi secara default di JavaScript.

3. Menggunakan Atribut onclick

Anda dapat menggunakan atribut onclick untuk menjalankan JavaScript saat pengguna mengklik suatu elemen. Seperti metode addEventListener, Anda dapat menggunakan metode onclick untuk mencetak teks, melakukan perhitungan, dan mengubah fitur elemen pada DOM.

Anda dapat menambahkan event listener onclick sebagai event handler inline ke elemen HTML. Acara ini terjadi ketika pengguna mengklik elemen tersebut. Ubah warna paragraf berikut secara dinamis dengan metode onclick:

html>
<html>
<tubuh>
<h1> Jalankan Acara onClickh1>
<Ppengenal="demo"onclick="Fungsisaya()">
 Klik saya untuk mengubah warna teks saya.
P>
tubuh>
html>

Di file JavaScript, tambahkan kode berikut:

fungsimyFunction() {
dokumen.getElementById("demo").gaya.warna = "merah";
}

Output akan muncul seperti yang ditunjukkan:

Mengapa Mempelajari Tentang Pendengar Acara?

Sebagai pengembang JavaScript, Anda akan sering menggunakan event listener dalam proyek. Anda dapat membuat berbagai fitur dengan event listener, termasuk menggelembungkan dan menangkap peristiwa. Memahami konsep ini akan memudahkan Anda membuat antarmuka dinamis pada aplikasi Anda.