Peristiwa JavaScript HTML DOM

HTML DOM memungkinkan JavaScript berrespon terhadap peristiwa HTML:

Mouse datang keatas!
Klik Saya

Berrespon terhadap peristiwa

JavaScript dapat dijalankan saat peristiwa terjadi, seperti saat pengguna mengklik elemen HTML.

Untuk menjalankan kode saat pengguna mengklik elemen, tambahkan kode JavaScript ke atribut peristiwa HTML:

onclick=JavaScript

Contoh peristiwa HTML:

  • Ketika pengguna mengklik mouse
  • Ketika halaman diunduh
  • Ketika gambar dimuat
  • Ketika mouse berada di atas elemen
  • Ketika bidang input diubah
  • Ketika formulir HTML disubmit
  • Ketika pengguna menekan tombol

Dalam contoh ini, ketika pengguna mengklik <h1> akan mengubah konten nya:

contoh

<!DOCTYPE html>
<html>
<body>
<h1 onclick="this.innerHTML = 'Hello!'">Klik teks ini!</h1>
</body>
</html>

Coba Sendiri

Dalam contoh ini, fungsi dipanggil dari penanganan peristiwa:

contoh

<!DOCTYPE html>
<html>
<body>
<h1 onclick="changeText(this)">Klik teks ini!</h1>
<script>
function changeText(id) { 
    id.innerHTML = "Hello:)";
}
</script>
</body>
</html>

Coba Sendiri

Properti Peristiwa HTML

Untuk menugaskan peristiwa ke elemen HTML, Anda dapat menggunakan properti peristiwa.

contoh

menugaskan ke elemen button onclick peristiwa:

<button onclick="displayDate()">Coba</button>

Coba Sendiri

dalam contoh di atas, fungsi yang dinamai displayDate akan dieksekusi ketika tombol diklik.

menugaskan peristiwa menggunakan HTML DOM

HTML DOM memungkinkan Anda menggunakan JavaScript untuk menugaskan peristiwa ke elemen HTML:

contoh

menentukan button elemen onclick peristiwa:

<script>
document.getElementById("myBtn").onclick = displayDate;
</script>

Coba Sendiri

dalam contoh di atas, fungsi yang dinamai displayDate ditugaskan ke elemen HTML dengan id="myBtn".

fungsi akan dieksekusi ketika tombol diklik.

peristiwa onload dan onunload

ketika pengguna masuk dan keluar halaman, peristiwa akan diaktifkan onload dan peristiwa onunload peristiwa.

onload peristiwa dapat digunakan untuk mengukur jenis dan versi browser pengunjung, lalu memuat versi halaman yang sesuai berdasarkan informasi tersebut.

onload dan peristiwa onunload peristiwa dapat digunakan untuk menangani kuki.

contoh

<body onload="checkCookies()">

Coba Sendiri

peristiwa onchange

peristiwa onchange peristiwa biasanya digunakan bersama dengan validasi bidang input.

di bawah ini adalah cara penggunaan peristiwa onchange ketika pengguna mengubah konten bidang input, fungsi upperCase() akan dipanggil.

contoh

<input type="text" id="fname" onchange="upperCase()">

Coba Sendiri

peristiwa onmouseover dan onmouseout

onmouseover dan onmouseout Event dapat digunakan untuk memicu fungsi saat pengguna memindahkan mouse ke atau keluar dari elemen HTML:

Mouse datang keatas!

Coba Sendiri

event onmousedown, onmouseup, dan onclick

onmousedown, onmouseup dan onclick Event menubuhkan event klik mouse yang penuh.

Pertama saat tombol mouse di klik,onmousedown Event diaktifkan; kemudian saat tombol mouse dilepas,onmouseup Event diaktifkan; akhirnya, saat klik mouse selesai,onclick Event diaktifkan.

Klik Saya

Coba Sendiri

Beberapa Contoh Lain

onmousedown dan onmouseup
Ubah gambar saat pengguna menekan tombol mouse.
onload
Tampilkan kotak peringatan saat halaman selesai dimuat.
onfocus
Ubah warna latar belakang saat input field mendapatkan fokus.
Event Mouse
Ubah warna elemen saat penunjuk bergerak ke atas elemen.

Panduan Referensi Objek Event DOM HTML

Untuk daftar lengkap semua event DOM HTML, kunjungi situs kami yang penuh Panduan Referensi Objek Event DOM HTML.