acara DOM


HTML DOM memberikan JavaScript keupayaan untuk bertindak balas terhadap acara HTML.

Bertindak balas terhadap peristiwa

Kami boleh melaksanakan JavaScript 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 telah dimuatkan

  • Apabila tetikus digerakkan ke atas elemen

  • Apabila medan input ditukar

  • Apabila borang HTML diserahkan

  • Apabila pengguna mencetuskan tekan kekunci

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

Instance

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>php中文网(php.cn)</title>
</head>
<body>

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

</body>
</html>

Jalankan instance»

Klik butang "Jalankan Instance" untuk melihat contoh dalam talian

Contoh ini memanggil fungsi daripada pengendali acara:

Instance

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>php中文网(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

Atribut acara HTML

Untuk menetapkan kepada elemen HTML Acara, anda boleh menggunakan sifat acara.

Instance

<!DOCTYPE html>
<html>
<head> 
<meta charset="utf-8"> 
<title>php中文网(php.cn)</title> 
</head>
<body>

<p>点击按钮执行 <em>displayDate()</em> 函数.</p>
<button onclick="displayDate()">点这里</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, fungsi bernama displayDate akan dilaksanakan apabila butang diklik.

Menggunakan HTML DOM untuk menetapkan acara

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

Contoh

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>php中文网(php.cn)</title>
</head>
<head>
</head>
<body>

<p>点击按钮执行 <em>displayDate()</em> 函数.</p>
<button id="myBtn">点这里</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 ditugaskan Berikan elemen HTML dengan id=myButn".

Fungsi Javascript akan dilaksanakan apabila butang diklik.

acara onload dan onload

onload dan acara onunload akan Dicetuskan apabila pengguna memasuki atau meninggalkan halaman,

acara onload boleh digunakan untuk mengesan jenis penyemak imbas pelawat dan versi penyemak imbas dan memuatkan versi halaman yang betul berdasarkan maklumat ini acara onunload boleh digunakan untuk mengendalikan kuki. butang untuk melihat dalam talian Contoh

acara onchange

acara onchange selalunya digunakan bersama-sama dengan pengesahan medan input.

Berikut ialah contoh cara menggunakan onchange. Apabila pengguna menukar kandungan medan input, fungsi huruf besar() dipanggil.

Instance

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>php中文网(php.cn)</title>
</head>
<body onload="checkCookies()">

<script>
function checkCookies(){
	if (navigator.cookieEnabled==true){
		alert("Cookies 可用")
	}
	else{
		alert("Cookies 不可用")
	}
}
</script>
<p>弹窗-提示浏览器cookie是否可用。</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 tetikus pengguna bergerak ke atas atau keluar daripada elemen HTML.

Contoh

Contoh onmouseover-onmouseout yang mudah:

Contoh

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>php中文网(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 contoh »

Klik butang "Jalankan contoh" untuk melihat contoh dalam talian

acara onmousedown, onmouseup dan onclick

onmousedown, onmouseup dan onclick Membuat semua bahagian acara klik tetikus. Mula-mula apabila butang tetikus diklik, acara onmousedown dinyalakan, apabila butang tetikus dilepaskan, acara onmouseup dinyalakan, dan akhirnya, apabila klik tetikus selesai, acara onclick dilepaskan.

Contoh

Contoh onmousedown-onmouseup mudah:

Terima Kasih

Lagi contoh

onmousedown dan onmouseup
Tukar imej apabila pengguna menekan butang tetikus.

Instance

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>php中文网(php.cn)</title>
</head>
<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

dimuat
Apabila halaman selesai dimuatkan, paparkan kotak gesaan.

Instance

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>php.cn</title>
</head>
<head>
<script>
function lighton(){
	document.getElementById('myimage').src="/upload/course/000/000/009/5804353cb2562758.gif";
}
function lightoff(){
	document.getElementById('myimage').src="/upload/course/000/000/009/580432b53cb5d221.gif";
}
</script>
</head>

<body>
<img id="myimage" onmousedown="lighton()" onmouseup="lightoff()" src="/upload/course/000/000/009/580432b53cb5d221.gif" width="100" height="180" />
<p>点击不释放鼠标灯将一直亮着!</p>
</body>
</html>

Run Instance»

Klik butang "Run Instance" untuk melihat contoh dalam talian

onfocus
Menukar warna latar belakang medan input apabila ia mendapat fokus.

Instance

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>php中文网(php.cn)</title>
</head>
<head>
<script>
function mymessage(){
	alert("消息在 onload 事件触发后弹出。");
}
</script>
</head>

<body onload="mymessage()"></body>

</html>

Run Instance»

Klik butang "Run Instance" untuk melihat contoh dalam talian

Peristiwa Tetikus
Apabila penuding bergerak ke atas elemen, tukar warnanya apabila penuding keluar daripada teks, ia akan menukar warnanya semula.

Instance

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>php中文网(php.cn)</title>
</head>
<head>
<script>
function myFunction(x){
	x.style.background="yellow";
}
</script>
</head>
<body>

输入你的名字: <input type="text" onfocus="myFunction(this)">
<p>当输入框获取焦点时，修改背景色（background-color属性） 将被触发。</p>

</body>
</html>

Jalankan contoh »

Klik butang "Jalankan contoh" untuk melihat contoh dalam talian