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中文网(php.cn)</title>
</head>
<head>
<script>
function changetext(id){
id.innerHTML="hello";
}
</script>
</head>
<body>
<h1 onclick="changetext(this)">点击！</h1>
</body>
</html>Untuk menetapkan acara kepada elemen HTML, anda Sifat acara boleh digunakan.
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>php中文网(php.cn)</title>
</head>
<body>
<button onclick="displayDate()">点击</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中文网(php.cn)</title>
</head>
<head>
</head>
<body>
<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>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中文网(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中文网(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>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中文网(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="鼠标请移动至此"
}
</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中文网(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.
![Projek hadapan-Shangyou [amalan komprehensif teknologi HTML/CSS/JS]](https://img.php.cn/upload/course/000/000/068/63bfcb2974f91471.jpg)
![Kursus front-end berasaskan sifar [pembelajaran lanjutan Vue dan aplikasi praktikal]](https://img.php.cn/upload/course/000/000/068/63bbd15353895588.jpg)
![Tutorial bahagian hadapan WEB [HTML5+CSS3+JS]](https://img.php.cn/upload/course/000/000/068/63ba60c8da520536.jpg)
![Aplikasi praktikal Apipost [api, antara muka, ujian automatik, olok-olok]](https://img.php.cn/upload/course/000/000/068/63b3c967a20f4861.jpg)
