Acara HTML DOM
HTML DOM memungkinkan peristiwa JavaScript untuk bereaksi terhadap HTML.
contoh
Bereaksi terhadap peristiwa
Ketika suatu peristiwa terjadi, Anda dapat menjalankan JavaScript, seperti ketika pengguna mengklik elemen HTML.
Untuk mengeksekusi kode ketika pengguna mengklik pada elemen, tambahkan kode JavaScript ke HTML atribut acara:
contoh acara HTML:
- Ketika pengguna mengklik mouse
- Saat halaman dimuat
- Ketika foto tersebut dimuat
- Ketika mouse bergerak di atas elemen
- Ketika field input diubah
- Ketika bentuk HTML diajukan
- Ketika pengguna memicu kunci
Dalam contoh ini, ketika pengguna mengklik, itu akan mengubah isi dari <h1> elemen:
contoh
<html>
<body>
<h1 onclick="this.innerHTML='Ooops!'">Click on this text!</h1>
</body>
</html>
Coba »
Dalam hal ini, fungsi akan dipanggil dari event handler:
contoh
<html>
<head>
<script>
function changetext(id)
{
id.innerHTML="Ooops!";
}
</script>
</head>
<body>
<h1 onclick="changetext(this)">Click on this text!</h1>
</body>
</html>
Coba »
HTML Acara Atribut
Untuk menetapkan acara untuk elemen HTML, Anda dapat menggunakan atribut acara.
contoh
Ditugaskan untuk elemen tombol aktivitas klik:
Coba »
Dalam contoh di atas, ketika tombol diklik, ia melakukan fungsi bernama displayDate.
Gunakan DOM HTML untuk menetapkan suatu peristiwa
Acara HTML DOM memungkinkan Anda untuk menggunakan JavaScript untuk menetapkan elemen HTML:
contoh
Ditugaskan onclick tombol acara elemen:
document.getElementById("myBtn"). onclick =function(){ displayDate() };
</script>
Coba »
Dalam contoh di atas, fungsi bernama displayDate ditugaskan ke id = myButn "elemen HTML.
Ketika tombol diklik, eksekusi fungsi.
onload dan acara onunload
Bila pengguna memasuki atau meninggalkan halaman, itu akan memicu onload dan acara onunload.
acara onload dapat digunakan untuk memeriksa pengunjung jenis browser dan versi dalam rangka berdasarkan informasi untuk memuat versi yang berbeda dari halaman.
onload dan onunload acara untuk menangani cookie.
event onchange
event onchange sering digunakan untuk memvalidasi input field.
Contoh berikut menunjukkan bagaimana menggunakan onchange. Ketika pengguna mengubah isi dari field input akan disebut huruf besar (fungsi).
onmouseover dan onmouseout acara
onmouseover dan onmouseout peristiwa dapat digunakan untuk memicu fungsi ketika pointer mouse bergerak ke dalam atau keluar dari elemen.
onmousedown, onmouseup dan acara onclick
onmousedown, onmouseup onclick event adalah klik mouse dan seluruh proses. Pertama, ketika tombol mouse diklik, memicu onmousedown acara, dan kemudian, ketika tombol mouse dilepaskan, itu akan memicu onmouseup acara, dan akhirnya, ketika mouse klik Finish, acara onclick dipicu.
HTML DOM Acara Referensi Obyek
Untuk penjelasan lengkap dan contoh dari setiap peristiwa, kunjungi panduan referensi HTML DOM .