Acara JavaScript

Peristiwa HTML adalah 'hal yang terjadi' di elemen HTML.

Ketika menggunakan JavaScript di halaman HTML, JavaScript dapat 'menanggapi' peristiwa ini.

Peristiwa HTML

Peristiwa HTML dapat disebabkan oleh beberapa hal yang dilakukan pengguna atau browser.

Berikut adalah beberapa contoh peristiwa HTML:

  • Halaman web HTML selesai dimuat
  • Kolom input HTML diubah
  • Tombol HTML di klik

Biasanya, saat peristiwa terjadi, pengguna ingin melakukan sesuatu.

JavaScript memungkinkan Anda mengeksekusi kode saat peristiwa terdeteksi.

Dengan kode JavaScript，HTML memungkinkan Anda menambahkan penangan peristiwa ke elemen HTML.

Dengan menggunakan tanda kutip tunggal:

<element event='Beberapa JavaScript>

Dengan menggunakan tanda kutip ganda:

<element event="Beberapa JavaScript">

Dalam contoh berikut:onclick Atribut (dan kode) ditambahkan ke <button> Elemen:

Contoh

<button onclick='document.getElementById("demo").innerHTML=Date()'>Kapan waktu sekarang?</button>

Coba sendiri

Dalam contoh di atas, kode JavaScript mengubah konten elemen dengan id="demo".

Dalam contoh berikut, kode (dengan this.innerHTML）mengubah konten elemen yang sama sendiri:

Contoh

<button onclick="this.innerHTML=Date()">Kapan waktu sekarang?</button>

Coba sendiri

Kode JavaScript biasanya terdiri dari banyak baris. Penamaan atribut peristiwa memang sering digunakan untuk memanggil fungsi:

Contoh

<button onclick="displayDate()">Kapan waktu sekarang?</button>

Coba sendiri

Peristiwa HTML yang umum

Berikut adalah beberapa peristiwa HTML yang umum:

peristiwa Deskripsi
onchange Elemen HTML telah diubah
onclick Pengguna menekan elemen HTML
onmouseover Pengguna memindahkan mouse ke atas elemen HTML
onmouseout Pengguna memindahkan mouse dari elemen HTML
onkeydown Pengguna menekan tombol papan tombol
onload Browser telah menyelesaikan pemuat halaman

Daftar yang lebih lengkap:Panduan Referensi JavaScript CodeW3C.com HTML DOM Event.

Apa yang dapat dilakukan JavaScript?

Penanganan kejadian dapat digunakan untuk menangani, memverifikasi masukan pengguna, tindakan pengguna, dan tindakan browser:

  • Hal yang harus dilakukan saat halaman dimuat
  • Hal yang harus dilakukan saat halaman ditutup
  • Tindakan yang harus dilakukan saat pengguna menekan tombol
  • Konten yang harus diproses saat pengguna memasukkan data
  • dan lain-lain

Ada banyak cara untuk memproses kejadian dengan JavaScript:

  • Properti kejadian HTML dapat melaksanakan kode JavaScript
  • Properti kejadian HTML dapat memanggil fungsi JavaScript
  • Anda dapat menempatkan fungsi penanganan kejadian sendiri ke elemen HTML
  • Anda dapat menghentikan kejadian untuk dikirim atau diproses
  • dan lain-lain

Anda akan belajar lebih banyak tentang kejadian dan penanganan kejadian di Bab HTML DOM.