Acara DOM HTML HTML
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>點擊按鈕來執(zhí)行 <b>displayDate()</b> 函數(shù)。</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>點擊按鈕來執(zhí)行 <b>displayDate()</b> 函數(shù)。</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>當(dāng)你離開輸入框時，被觸發(fā)的函數(shù)會把你輸入的文本轉(zhuǎn)換為大寫字母。</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="把鼠標(biāo)指針移動到上面"
}
</script>
</body>
</html>
