Acara JavaScript HTML DOM
HTML DOM JavaScript, HTML memiliki kemampuan untuk bereaksi terhadap peristiwa.
contoh
Bereaksi terhadap peristiwa
Kami dapat mengeksekusi JavaScript ketika peristiwa itu terjadi, seperti ketika pengguna mengklik pada elemen HTML.
Untuk mengeksekusi kode ketika pengguna mengklik pada elemen, menambahkan kode JavaScript untuk acara HTML atribut:
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 Anda mengirimkan formulir HTML
- Ketika pengguna memicu kunci
Dalam contoh ini, ketika pengguna dari <h1> elemen ketika diklik, akan mengubah isinya:
contoh
<Html>
<Body>
<H1 onclick = "this.innerHTML = 'Ooops!'"> Klik pada teks! </ H1>
</ Body>
</ Html>
Coba »
Dalam hal ini untuk memanggil fungsi dari event handler:
contoh
<Html>
<Head>
<Script>
Fungsi changetext (id)
{
id.innerHTML = "Ooops!";
}
</ Script>
</ Kepala>
<Body>
<H1 onclick = "changetext (ini)"> klik pada teks! </ H1>
</ Body>
</ Html>
Coba »
HTML Acara Atribut
Untuk menetapkan acara untuk elemen HTML, Anda dapat menggunakan atribut acara.
contoh
Ditugaskan ke acara onclick tombol elemen:
Coba »
Dalam contoh di atas, fungsi bernama displayDate akan mengeksekusi ketika tombol diklik.
Gunakan DOM HTML untuk menetapkan suatu peristiwa
HTML DOM memungkinkan Anda untuk menggunakan JavaScript untuk menetapkan acara untuk elemen HTML:
contoh
Ditugaskan ke acara onclick tombol elemen:
. Document.getElementById ( "myBtn") onclick = function () {displayDate ()};
</ Script>
Coba »
Dalam contoh di atas, fungsi ditugaskan ke id = myButn "elemen HTML displayDate bernama.
Klik tombol saat fungsi Javascript akan dieksekusi.
onload dan acara onunload
onload dan onunload acara dipicu ketika pengguna memasuki atau meninggalkan halaman.
acara onload dapat digunakan jenis browser dan versi browser pengunjung terdeteksi, dan berdasarkan informasi ini untuk memuat versi yang benar dari halaman.
onload dan acara onunload dapat digunakan untuk menangani kue.
event onchange
onchange acara sering dikombinasikan validasi field input untuk digunakan.
Berikut adalah contoh bagaimana menggunakan onchange itu. Ketika pengguna mengubah isi dari field input, panggilan huruf besar () fungsi.
onmouseover dan onmouseout acara
onmouseover dan onmouseout peristiwa dapat digunakan untuk memicu fungsi ketika mouse pengguna bergerak ke atas dari elemen HTML atau elemen dihapus.
onmousedown, onmouseup dan acara onclick
onmousedown, onmouseup dan onclick merupakan semua bagian dari acara klik mouse. Pertama, ketika Anda mengklik tombol mouse, pemicu onmousedown acara ketika tombol mouse dilepaskan, itu akan memicu onmouseup acara, dan akhirnya, ketika penyelesaian klik mouse, maka akan memicu event onclick.
contoh
Sebuah sederhana onmousedown-onmouseup misalnya:
contoh yang lebih
onmousedown dan onmouseup
Ketika pengguna menekan tombol mouse, penggantian gambar.
onload
Saat halaman selesai loading, menampilkan kotak pesan.
onfocus
Ketika kolom input memiliki fokus, mengubah warna latar belakang.
peristiwa mouse
Ketika pointer bergerak lebih elemen, mengubah warna, ketika pointer bergerak keluar dari teks, warna akan berubah lagi.