Acara DOM HTML HTML
Acara
Acara ialah beberapa tindakan yang dilakukan oleh pengguna atau penyemak imbas itu sendiri, seperti klik , Muatkan dan alih tetikus ialah kedua-dua nama acara.
Acara ialah jambatan antara javaScript dan DOM.
Jika anda mencetuskannya, saya akan melaksanakannya - apabila peristiwa itu berlaku, fungsi pengendalinya dipanggil untuk melaksanakan kod JavaScript yang sepadan untuk memberikan respons.
Contoh biasa ialah: peristiwa pemuatan dicetuskan apabila halaman dimuatkan; peristiwa klik dicetuskan apabila pengguna mengklik pada elemen.
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, tambah kod JavaScript pada atribut acara HTML:
onclick=JavaScript
Contoh HTML peristiwa:
Apabila pengguna mengklik tetikus
Apabila halaman web telah dimuatkan
Apabila imej telah dimuatkan
Apabila tetikus bergerak ke atas elemen
Apabila medan input ditukar
Apabila borang HTML diserahkan
Apabila pengguna mencetuskan kekunci
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>php中文網(wǎng)(php.cn)</title>
</head>
<head>
<script>
function changetext(id){
id.innerHTML="hello";
}
</script>
</head>
<body>
<h1 onclick="changetext(this)">點(diǎn)擊！</h1>
</body>
</html>Untuk menetapkan acara kepada elemen HTML, anda Sifat acara boleh digunakan.
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>php中文網(wǎng)(php.cn)</title>
</head>
<body>
<button onclick="displayDate()">點(diǎn)擊</button>
<script>
function displayDate(){
document.getElementById("demo").innerHTML=Date();
}
</script>
<p id="demo"></p>
</body>
</html>HTML DOM membenarkan anda menggunakan JavaScript untuk menetapkan acara kepada elemen HTML:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>php中文網(wǎng)(php.cn)</title>
</head>
<head>
</head>
<body>
<button id="myBtn">點(diǎn)這里</button>
<script>
document.getElementById("myBtn").onclick=function(){displayDate()};
function displayDate(){
document.getElementById("demo").innerHTML=Date();
}
</script>
<p id="demo"></p>
</body>
</html>acara onload dan onload
onload and onload peristiwa Akan dicetuskan apabila pengguna memasuki atau meninggalkan halaman. Acara
onload boleh digunakan untuk mengesan jenis penyemak imbas pelawat dan versi penyemak imbas serta memuatkan versi halaman web yang betul berdasarkan maklumat ini.
Acara onload dan onload boleh digunakan untuk mengendalikan kuki.
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>php中文網(wǎng)(php.cn)</title>
<script type="text/javascript">
function load(){
alert("頁面加載完成");
}
</script>
</head>
<body onload="load()">
</body>
</html>acara onchange
acara onchange sering digunakan bersama-sama dengan pengesahan medan input.
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>php中文網(wǎng)(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>當(dāng)你離開輸入框后，將小寫字母轉(zhuǎn)為大寫字母。</p>
</body>
</html>acara onmouseover dan onmouseout
Acara onmouseover dan onmouseout boleh digunakan untuk mencetuskan fungsi apabila tetikus pengguna bergerak ke atas atau keluar daripada elemen HTML.
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>php中文網(wǎng)(php.cn)</title>
</head>
<body>
<div onmouseover="mOver(this)" onmouseout="mOut(this)" style="background-color:yellow;width:120px;height:20px;padding:40px;">Mouse Over Me</div>
<script>
function mOver(obj){
obj.innerHTML="Thank You"
}
function mOut(obj){
obj.innerHTML="鼠標(biāo)請移動(dòng)至此"
}
</script>
</body>
</html>acara onmousedown, onmouseup dan onclick
onmousedown, onmouseup dan onclick membentuk 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.
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>php中文網(wǎng)(php.cn)</title>
<script type="text/javascript">
function noNumbers(e)
{
var keynum;
var keychar;
keynum = window.event ? e.keyCode : e.which;
keychar = String.fromCharCode(keynum);
alert(keynum+':'+keychar);
}
</script>
</head>
<body>
<input type="text" onkeydown="return noNumbers(event)" />
</body>
</html>Acara lain:
onmousedown dan onmouseup
Tukar imej apabila pengguna menekan butang tetikus.
onload
Apabila halaman selesai dimuatkan, paparkan kotak gesaan.
onfocus
Menukar warna latar belakang medan input apabila ia mendapat fokus.
Peristiwa Tetikus
Apabila penuding bergerak ke atas elemen, tukar warnanya apabila penuding keluar daripada teks, ia akan menukar warnanya semula.
