tutorial pengembangan web terbaru
 

JavaScript HTML DOM Acara

❮ Sebelumnya Berikutnya Bab ❯

HTML DOM memungkinkan JavaScript untuk bereaksi terhadap peristiwa HTML:

Mouse Over Me
Klik Saya

Bereaksi dengan Acara

JavaScript dapat dieksekusi ketika suatu peristiwa terjadi, seperti ketika pengguna mengklik elemen HTML.

Untuk mengeksekusi kode ketika pengguna mengklik pada elemen, menambahkan kode JavaScript untuk atribut acara HTML:

onclick=JavaScript

Contoh peristiwa HTML:

  • Ketika pengguna mengklik mouse
  • Ketika sebuah halaman web telah dimuat
  • Ketika gambar telah dimuat
  • Ketika mouse bergerak lebih elemen
  • Ketika sebuah field input berubah
  • Ketika bentuk HTML diajukan
  • Ketika pengguna stroke kunci

Dalam contoh ini, isi dari <h1> elemen berubah ketika pengguna mengklik di atasnya:

Contoh

<!DOCTYPE html>
<html>
<body>

<h1 onclick="this.innerHTML='Ooops!'">Click on this text!</h1>

</body>
</html>
Cobalah sendiri "

Dalam contoh ini, fungsi ini disebut 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>
Cobalah sendiri "

HTML Acara Atribut

Untuk menetapkan acara untuk elemen HTML Anda dapat menggunakan atribut acara.

Contoh

Menetapkan aktivitas klik ke elemen tombol:

<button onclick="displayDate()">Try it</button>
Cobalah sendiri "

Dalam contoh di atas, fungsi bernama displayDate akan dijalankan ketika tombol diklik.

Menetapkan Acara Menggunakan DOM HTML

HTML DOM memungkinkan Anda untuk menetapkan acara untuk elemen HTML menggunakan JavaScript:

Contoh

Menetapkan aktivitas klik ke elemen tombol:

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

Dalam contoh di atas, fungsi bernama displayDate ditugaskan untuk elemen HTML dengan id="myBtn" .

fungsi akan dijalankan ketika tombol diklik.

The onload dan onunload Acara

The onload dan onunload peristiwa dipicu ketika pengguna memasuki atau meninggalkan halaman.

The onload event dapat digunakan untuk memeriksa pengunjung tipe browser dan versi browser, dan memuat versi yang tepat dari halaman web berdasarkan informasi.

The onload dan onunload peristiwa dapat digunakan untuk menangani cookie.

Contoh

<body onload="checkCookies()">
Cobalah sendiri "

The onchange acara

The onchange acara sering digunakan dalam kombinasi dengan validasi field input.

Berikut adalah contoh bagaimana menggunakan onchange . The upperCase() fungsi akan dipanggil ketika pengguna mengubah isi dari sebuah field input.

Contoh

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

The onmouseover dan onmouseout Acara

The onmouseover dan onmouseout peristiwa dapat digunakan untuk memicu fungsi ketika pengguna mouses lebih, atau keluar dari, sebuah elemen HTML:

Mouse Over Me

Cobalah sendiri "

The onmousedown , onmouseup dan onclick Acara

The onmousedown , onmouseup , dan onclick acara adalah semua bagian dari mouse-klik. Pertama ketika mouse-tombol diklik, onmousedown acara dipicu, maka, ketika mouse-tombol dilepaskan, onmouseup acara dipicu, akhirnya, ketika mouse-klik selesai, onclick event dipicu.

Click Me

Cobalah sendiri "

Contoh lebih

onmousedown dan onmouseup
Mengubah gambar ketika pengguna memegang tombol mouse.

onload
Menampilkan kotak peringatan saat halaman selesai loading.

onfocus
Mengubah latar belakang warna dari field input ketika akan fokus.

mouse Acara
Mengubah warna elemen saat kursor bergerak di atasnya.

HTML DOM Acara Referensi Obyek

Untuk daftar semua peristiwa HTML DOM, melihat lengkap kami HTML DOM acara Object Reference .

Uji Diri dengan Latihan!

Latihan 1 » Latihan 2» Latihan 3 »


❮ Sebelumnya Berikutnya Bab ❯