Peristiwa HTML adalah "hal-hal" yang terjadi pada elemen HTML.
Ketika JavaScript digunakan dalam halaman HTML, JavaScript dapat "bereaksi" atas peristiwa ini.
Acara HTML
Sebuah acara HTML dapat menjadi sesuatu browser tidak, atau sesuatu yang pengguna melakukan.
Berikut adalah beberapa contoh dari peristiwa HTML:
- Halaman web HTML selesai loading
- Field input HTML diubah
- Sebuah tombol HTML diklik
Seringkali, ketika peristiwa terjadi, Anda mungkin ingin melakukan sesuatu.
JavaScript memungkinkan Anda mengeksekusi kode ketika peristiwa terdeteksi.
HTML memungkinkan atribut event handler, dengan kode JavaScript, yang akan ditambahkan ke elemen HTML.
Dengan tanda kutip tunggal:
< some-HTML-element
some-event = ' some JavaScript ' >Dengan tanda kutip ganda:
< some-HTML-element
some-event = " some JavaScript " >Pada contoh berikut, sebuah onclick atribut (dengan kode), ditambahkan ke elemen tombol:
Contoh
<button onclick='getElementById("demo").innerHTML=Date()'>The time is?</button>
Cobalah sendiri " Dalam contoh di atas, kode JavaScript mengubah isi dari elemen dengan id="demo" .
Pada contoh berikut, kode mengubah isi dari elemen sendiri (menggunakan this .innerHTML ):
kode JavaScript sering beberapa garis panjang. Hal ini lebih umum untuk melihat atribut acara memanggil fungsi:
Acara HTML umum
Berikut adalah daftar dari beberapa peristiwa HTML umum:
| Peristiwa | Deskripsi |
|---|---|
| onchange | Sebuah elemen HTML telah diubah |
| onclick | pengguna mengklik elemen HTML |
| onmouseover | pengguna menggerakkan mouse di atas sebuah elemen HTML |
| onmouseout | pengguna menggerakkan mouse menjauh dari elemen HTML |
| onkeydown | pengguna menekan sebuah tombol keyboard |
| onload | browser selesai loading halaman |
Daftar ini lebih lama lagi: w3ii JavaScript Referensi HTML DOM Events .
Apa yang bisa JavaScript Dilakukan?
event handler dapat digunakan untuk menangani, dan memverifikasi, input pengguna, tindakan pengguna, dan tindakan browser:
- Hal-hal yang harus dilakukan setiap kali halaman beban
- Hal-hal yang harus dilakukan saat halaman ditutup
- Aksi yang harus dilakukan bila pengguna mengklik tombol
- Konten yang harus diverifikasi ketika data input pengguna
- Dan banyak lagi ...
Banyak metode yang berbeda dapat digunakan untuk membiarkan pekerjaan JavaScript dengan acara:
- HTML atribut acara dapat mengeksekusi kode JavaScript secara langsung
- HTML atribut acara dapat memanggil fungsi JavaScript
- Anda dapat menetapkan fungsi event handler Anda sendiri untuk elemen HTML
- Anda dapat mencegah peristiwa dari yang dikirim atau sedang ditangani
- Dan banyak lagi ...
Anda akan belajar lebih banyak tentang peristiwa dan event handler dalam HTML DOM bab.
Uji Diri dengan Latihan!
Latihan 1 » Latihan 2» Latihan 3 »