HTML DOM - Acara


HTML DOM membenarkan JavaScript bertindak balas terhadap acara HTML.

Bertindak balas kepada peristiwa

JavaScript boleh dilaksanakan apabila peristiwa berlaku, seperti apabila pengguna mengklik pada elemen HTML.

Untuk melaksanakan kod apabila pengguna mengklik pada elemen, tambahkan kod JavaScript pada atribut acara HTML:

onclick=JavaScript

Contoh acara HTML:

  • Apabila pengguna mengklik tetikus

  • Apabila halaman web dimuatkan

  • Apabila imej dimuatkan

  • Apabila tetikus digerakkan ke atas elemen

  • Apabila medan input ditukar

  • Apabila borang HTML diserahkan

  • Apabila pengguna mencetus kekunci tekan

Dalam ini kes , apabila pengguna mengklik, kandungan elemen <h1> akan ditukar:

Instance

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>php.cn</title>
</head>
<body>

<h1 onclick="this.innerHTML='Ooops!'">点击文本!</h1>

</body>
</html>

Jalankan instance»

Klik butang "Jalankan Instance" untuk melihat contoh dalam talian

Dalam contoh ini, fungsi dipanggil daripada pengendali acara:

Instance

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>php.cn</title>
</head>
<head>
<script>
function changetext(id){
	id.innerHTML="Ooops!";
}
</script>
</head>
<body>

<h1 onclick="changetext(this)">点击文本!</h1>

</body>
</html>

Jalankan contoh»

Klik butang "Jalankan contoh" untuk melihat contoh dalam talian

Acara HTML atribut

Jika perlu Untuk menetapkan acara kepada elemen HTML, anda menggunakan atribut acara.

Instance

<!DOCTYPE html>
<html>
<html>
<body>

<p>Click the button to execute the <em>displayDate()</em> function.</p>

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

<script>
function displayDate()
{
document.getElementById("demo").innerHTML=Date();
}
</script>

<p id="demo"></p>

</body>
</html>

Run Instance»

Klik butang "Run Instance" untuk melihat contoh dalam talian

Dalam contoh di atas, apabila butang diklik, fungsi bernama displayDate akan dilaksanakan.

Gunakan HTML DOM untuk menetapkan acara

HTML DOM membenarkan anda menggunakan JavaScript untuk menetapkan acara kepada elemen HTML:

Instance

<html><!DOCTYPE html>
<html>
<head>
</head>
<body>

<p>Click the button to execute the <em>displayDate()</em> function.</p>

<button id="myBtn">Try it</button>

<script>
document.getElementById("myBtn").onclick=function(){displayDate()};
function displayDate()
{
document.getElementById("demo").innerHTML=Date();
}
</script>

<p id="demo"></p>

</body>
</html>

Jalankan Instance»

Klik butang "Run Instance" untuk melihat contoh dalam talian

Dalam contoh di atas, fungsi bernama displayDate diberikan kepada elemen HTML dengan id=myButn".

Apabila butang diklik, fungsi akan dilaksanakan.

peristiwa onload dan onunload

Apabila pengguna memasuki atau meninggalkan halaman , peristiwa onload dan onunload dicetuskan Acara onload boleh digunakan untuk menyemak jenis dan versi pelayar pelawat, supaya versi halaman web yang berbeza boleh dimuatkan berdasarkan maklumat ini acara tersedia. Untuk mengendalikan kuki. untuk melihat contoh dalam talian

acara onchange

acara onchange selalunya digunakan untuk pengesahan medan input.

Contoh berikut menunjukkan cara menggunakan onchange. Apabila pengguna menukar kandungan medan input, fungsi huruf besar() dipanggil.

Instance

<html><!DOCTYPE html>
<html>
<body onload="checkCookies()">

<script>
function checkCookies()
{
if (navigator.cookieEnabled==true)
	{
	alert("Cookies are enabled")
	}
else
	{
	alert("Cookies are not enabled")
	}
}
</script>

<p>An alert box should tell you if your browser has enabled cookies or not.</p>
</body>
</html>

Run Instance»

Klik butang "Run Instance" untuk melihat contoh dalam talian

acara onmouseover dan onmouseout

Acara onmouseover dan onmouseout boleh digunakan untuk mencetuskan fungsi apabila penuding tetikus bergerak ke atau dari elemen.

Instance

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>php.cn</title>
</head>
<head>
<script>
function myFunction(){
	var x=document.getElementById("fname");
	x.value=x.value.toUpperCase();
}
</script>
</head>
<body>

输入你的名字: <input type="text" id="fname" onchange="myFunction()">
<p>当你离开输入框后，函数将被触发，将小写字母转为大写字母。</p>

</body>
</html>

Run Instance»

Klik butang "Run Instance" untuk melihat contoh dalam talian

acara onmousedown, onmouseup dan onclick

acara onmousedown, onmouseup dan onclick ialah keseluruhan proses klik tetikus. Pertama, apabila butang tetikus diklik, peristiwa onmousedown dicetuskan Kemudian, apabila butang tetikus dilepaskan, peristiwa onmousedown dicetuskan. acara onmouseup, dan akhirnya, apabila klik tetikus selesai, acara onclick dicetuskan.

Instance

<html><!DOCTYPE html>
<html>
<body>

<div onmouseover="mOver(this)" onmouseout="mOut(this)" style="background-color:#D94A38;width:120px;height:20px;padding:40px;">Mouse Over Me</div>

<script>
function mOver(obj)
{
obj.innerHTML="Thank You"
}

function mOut(obj)
{
obj.innerHTML="Mouse Over Me"
}
</script>

</body>
</html>

Run Instance»

Klik butang "Run Instance" untuk melihat contoh dalam talian

Manual Rujukan Objek Acara HTML DOM

Untuk penerangan lengkap dan contoh setiap acara, sila lawati Manual Rujukan HTML DOM kami.