Acara HTML DOM JavaScript
HTML DOM memberikan JavaScript keupayaan untuk bertindak balas terhadap acara HTML.
Bertindak balas kepada 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 dimuatkan Apabila tetikus digerakkan ke atas elemen Apabila medan input ditukar Apabila borang HTML diserahkan Apabila pengguna mencetuskan kekunci kekunci
Dalam contoh ini, apabila pengguna mengklik, kandungan elemen <h1> akan ditukar:
<!doctype html>
<html>
<meta charset="utf-8">
<head>
<meta charset="UTF-8">
<meta name="Generator" content="EditPlus®">
<meta name="Author" content="">
<meta name="Keywords" content="">
<meta name="Description" content="">
<title>Document</title>
</head>
<body>
<h1 onclick="this.innerHTML='hello!'">点我点我点我!</h1>
</body>
</html>
Dalam contoh ini, fungsi akan dipanggil daripada pengendali acara:
<!DOCTYPE html>
<html>
<meta charset="utf-8">
<head>
<script>
function changetext(id)
{
id.innerHTML="hello!";
}
</script>
</head>
<body>
<h1 onclick="changetext(this)">请点击这段文本！</h1>
</body>
</html> Atribut acara HTML
Untuk menetapkan acara pada elemen HTML, anda boleh menggunakan atribut acara.
Tetapkan acara onclick pada elemen butang:
<!DOCTYPE html>
<html>
<meta charset="utf-8">
<body>
<p>点击按钮来执行 <b>displayDate()</b> 函数。</p>
<button onclick="displayDate()">试一试</button>
<script>
function displayDate()
{
document.getElementById("demo").innerHTML=Date();
}
</script>
<p id="demo"></p>
</body>
</html>Dalam contoh di atas, apabila butang diklik, fungsi bernama displayDate dilaksanakan.
Gunakan HTML DOM untuk menetapkan acara
HTML DOM membenarkan anda menggunakan JavaScript untuk menetapkan acara kepada elemen HTML:
Tugaskan acara onclick kepada elemen butang:
<!DOCTYPE html>
<html>
<meta charset="utf-8">
<head>
</head>
<body>
<p>点击按钮来执行 <b>displayDate()</b> 函数。</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> Dalam contoh di atas, fungsi bernama displayDate diberikan kepada elemen HTML dengan id=myButn".
Apabila butang diklik, fungsi akan dilaksanakan.
onload dan onunload acara
Acara onload dan onload dicetuskan apabila pengguna memasuki atau meninggalkan halaman
Acara onload boleh digunakan untuk menyemak jenis dan versi penyemak imbas pelawat supaya versi halaman web yang berbeza. boleh dimuatkan berdasarkan maklumat ini.
acara onload dan onunload boleh digunakan untuk mengendalikan kuki
<!DOCTYPE html>
<html>
<meta charset="utf-8">
<body onload="checkCookies()">
<script>
function checkCookies()
{
if (navigator.cookieEnabled==true)
{
alert("Cookies are enabled")
}
else
{
alert("Cookies are not enabled")
}
}
</script>
<p>弹出的提示框会告诉你浏览器是否已启用 cookie。</p>
</body>
</html>acara onchange
acara onchange sering digunakan untuk pengesahan medan input.
Contoh berikut menunjukkan Cara menggunakan onchange Fungsi upperCase() dipanggil apabila pengguna menukar kandungan medan input Acara onmouseover dan onmouseout boleh digunakan apabila penunjuk tetikus bergerak ke atau pergi .
Contoh onmouseup-onmouseout mudah:
<!DOCTYPE html>
<html>
<meta charset="utf-8">
<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>onmouseup dan onclick event
Acara Onmousedown, onmouseup dan onclick ialah keseluruhan proses klik tetikus. Pertama, apabila butang tetikus diklik, peristiwa onmousedown dicetuskan Kemudian, apabila butang tetikus dilepaskan, peristiwa onmouseup dicetuskan Akhirnya, apabila klik tetikus selesai, peristiwa onclick dicetuskan.
Contoh onmousedown-onmouseup mudah:
<!DOCTYPE html>
<html>
<meta charset="utf-8">
<body>
<div onmouseover="mOver(this)"
onmouseout="mOut(this)"
style="background-color:#D94A38;width:200px;height:50px;padding-top:25px;text-align:center;">
Mouse Over Me
</div>
<script>
function mOver(obj)
{
obj.innerHTML="谢谢你"
}
function mOut(obj)
{
obj.innerHTML="把鼠标指针移动到上面"
}
</script>
</body>
</html>
bahagian seterusnya