JavaScript HTML DOM 事件

DOM HTML memungkinkan JavaScript untuk merespon acara HTML:

鼠标移上来！
点击我

Tanggapi acara

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

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

onclick=JavaScript

Contoh acara HTML:

  • Apabila pengguna mengklik mouse
  • apabila halaman di muat
  • apabila imej disiapkan untuk dimuat
  • apabila kursor mouse diarahkan ke atas elemen
  • apabila medan input diubah
  • apabila formulir HTML diserahkan
  • apabila pengguna menekan tombol

Dalam contoh ini, apabila pengguna meng klik <h1> akan mengubah kandungannya:

contoh

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

亲自试一试

Dalam contoh ini, fungsi dipanggil dari pengurus peristiwa:

contoh

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

亲自试一试

Sifat Peristiwa HTML

untuk menyusun peristiwa kepada elemen HTML, anda boleh menggunakan sifat peristiwa.

contoh

menyusun kepada elemen butang onclick peristiwa:

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

亲自试一试

dalam contoh sebelumnya, fungsi yang dinamakan displayDate akan dijalankan apabila butang ditekan.

mengatur peristiwa menggunakan HTML DOM

HTML DOM memungkinkan anda menggunakan JavaScript untuk memberikan peristiwa kepada elemen HTML:

contoh

tentukan untuk elemen butang onclick peristiwa:

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

亲自试一试

dalam contoh sebelumnya, fungsi yang dinamakan displayDate diberikan kepada elemen HTML dengan id="myBtn".

fungsi akan dijalankan apabila butang ditekan.

peristiwa onload dan onunload

peristiwa akan diaktifkan apabila pengguna masuk dan keluar halaman. onload 和 peristiwa onunload peristiwa.

onload peristiwa boleh digunakan untuk mengesan jenis dan versi pereka pemeriksa pengguna, lalu memuat versi halaman yang sesuai berdasarkan maklumat itu.

onload 和 peristiwa onunload peristiwa boleh digunakan untuk mengendalikan kuki.

contoh

<body onload="checkCookies()">

亲自试一试

peristiwa onchange

peristiwa onchange peristiwa biasanya digunakan bersama-sama dengan pengesahan medan input.

di bawah adalah cara penggunaan peristiwa onchange apabila pengguna mengubah kandungan medan input, fungsi upperCase() akan dipanggil.

contoh

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

亲自试一试

peristiwa onmouseover dan onmouseout

onmouseover 和 onmouseout 事件可用于当用户将鼠标移至 HTML 元素上或移出时触发某个函数：

鼠标移上来！

亲自试一试

onmousedown, onmouseup 以及 onclick 事件

onmousedown, onmouseup 以及 onclick 事件构成了完整的鼠标点击事件。

首先当鼠标按钮被点击时，onmousedown 事件被触发；然后当鼠标按钮被释放时，onmouseup 事件被触发；最后，当鼠标点击完成后，onclick 事件被触发。

点击我

亲自试一试

更多实例

onmousedown 和 onmouseup
当用户按下鼠标按钮时改变图像。
onload
当页面已完成加载时显示报警框。
onfocus
当输入字段获得焦点时改变其背景色。
鼠标事件
当指针移动到元素上时改变其颜色。

HTML DOM Event 对象参考手册

如需所有 HTML DOM 事件的列表，请访问我们完整的 HTML DOM 事件对象参考手册。