Acara DOM HTML JavaScript
HTML DOM memungkinkan JavaScript untuk bereaksi terhadap peristiwa HTML:
Bereaksi terhadap Peristiwa
JavaScript dapat dieksekusi ketika suatu peristiwa terjadi, seperti ketika pengguna mengklik elemen HTML.
Untuk mengeksekusi kode saat pengguna mengklik elemen, tambahkan kode JavaScript ke atribut peristiwa HTML:
onclick=JavaScript
Contoh event HTML:
- Ketika pengguna mengklik mouse
- Ketika halaman web telah dimuat
- Saat gambar telah dimuat
- Saat mouse bergerak di atas elemen
- Ketika bidang input diubah
- Saat formulir HTML dikirimkan
- Saat pengguna menekan tombol
Dalam contoh ini, konten <h1>elemen diubah saat pengguna mengkliknya:
Contoh
<!DOCTYPE html>
<html>
<body>
<h1 onclick="this.innerHTML = 'Ooops!'">Click on this text!</h1>
</body>
</html>
Dalam contoh ini, sebuah fungsi dipanggil dari event handler:
Contoh
<!DOCTYPE html>
<html>
<body>
<h1 onclick="changeText(this)">Click on this text!</h1>
<script>
function changeText(id) {
id.innerHTML = "Ooops!";
}
</script>
</body>
</html>
Atribut Acara HTML
Untuk menetapkan peristiwa ke elemen HTML, Anda dapat menggunakan atribut peristiwa.
Contoh
Tetapkan acara onclick ke elemen tombol:
<button onclick="displayDate()">Try it</button>
Pada contoh di atas, sebuah fungsi bernama displayDateakan dijalankan ketika tombol diklik.
Tetapkan Acara Menggunakan HTML DOM
DOM HTML memungkinkan Anda untuk menetapkan peristiwa ke elemen HTML menggunakan JavaScript:
Contoh
Tetapkan acara onclick ke elemen tombol:
<script>
document.getElementById("myBtn").onclick = displayDate;
</script>
Dalam contoh di atas, fungsi bernama displayDateditugaskan ke elemen HTML dengan ekstensi id="myBtn".
Fungsi akan dijalankan ketika tombol diklik.
Acara onload dan onunload
Peristiwa onloaddan onunloaddipicu ketika pengguna memasuki atau meninggalkan halaman.
Acara onloadini dapat digunakan untuk memeriksa jenis browser pengunjung dan versi browser, dan memuat versi halaman web yang tepat berdasarkan informasi tersebut.
Acara onloaddan onunloaddapat digunakan untuk menangani cookie.
Contoh
<body onload="checkCookies()">
Acara pergantian
Acara onchangeini sering digunakan dalam kombinasi dengan validasi bidang input.
Di bawah ini adalah contoh cara menggunakan onchange. Fungsi upperCase()
akan dipanggil ketika pengguna mengubah isi dari field input.
Contoh
<input type="text" id="fname"
onchange="upperCase()">
Acara onmouseover dan onmouseout
Peristiwa onmouseoverand onmouseoutdapat digunakan untuk memicu fungsi ketika pengguna mengarahkan mouse ke atas, atau keluar dari, elemen HTML:
Acara onmousedown, onmouseup, dan onclick
, onmousedown, onmouseupdan onclickacara adalah bagian dari klik mouse. Pertama ketika tombol mouse diklik, acara onmousedown dipicu, kemudian, ketika tombol mouse dilepaskan, acara onmouseup dipicu, akhirnya, ketika klik mouse selesai, acara onclick dipicu.
Lebih Banyak Contoh
Mengubah gambar saat pengguna menahan tombol mouse.
Menampilkan kotak peringatan ketika halaman telah selesai dimuat.
Mengubah warna latar belakang bidang input saat mendapat fokus.
Mengubah warna elemen saat kursor bergerak di atasnya.
Referensi Objek Acara DOM HTML
Untuk daftar semua peristiwa DOM HTML, lihat Referensi Objek Peristiwa DOM HTML lengkap kami .