Apakah itu acara
JavaScript mencipta halaman dinamik. Peristiwa ialah tingkah laku yang boleh dikesan oleh JavaScript. Setiap elemen dalam halaman web boleh menjana peristiwa tertentu yang boleh mencetuskan fungsi atau prosedur JavaScript.
1. Acara klik tetikus (onclick)
onclick ialah peristiwa klik tetikus, yang berlaku apabila tetikus diklik pada halaman web. Pada masa yang sama, blok program yang dipanggil oleh acara onclick akan dilaksanakan, biasanya digunakan dengan butang.
Contoh: Apabila kita mengklik butang, peristiwa onclick dicetuskan dan fungsi add2() daripada jumlah dua nombor dipanggil.
<html>
<head>
<script type="text/javascript">
function add2(){
var numa,numb,sum;
numa=6;
numb=8;
sum=numa+numb;
document.write("两数和为:"+sum); }
</script>
</head>
<body>
<form>
<input name="button" type="button" value="点击提交" onclick="add2()" />
</form>
</body>
</html>
Nota: Jika anda menggunakan acara dalam halaman web, tetapkan atribut acara dalam elemen.
2. Tetikus atas acara (onmouseover)
Peristiwa mouse over apabila tetikus bergerak ke atas objek, objek mencetuskan acara onmouseover dan melaksanakan program yang dipanggil oleh acara onmouseover.
Apabila tetikus melepasi butang "OK", fungsi mesej() dipanggil dan kotak dialog mesej muncul.
<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title> 鼠标经过事件 </title>
<script type="text/javascript">
function message(){
confirm("请输入密码后，再单击确定!"); }
</script>
</head>
<body>
<form>
密码:
<input name="password" type="password" >
<input name="确定" type="button" value="确定" onmouseover="message()"/>
</form>
</body>
</html>
3. Acara keluar tetikus (onmouseout)
Acara pergerakan tetikus, apabila tetikus bergerak menjauhi objek semasa, atur cara yang dipanggil onmouseout dilaksanakan.
Apabila tetikus bergerak menjauhi butang "Klik Saya", fungsi mesej() dipanggil dan kotak dialog mesej muncul.
<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>鼠标移开事件 </title>
<script type="text/javascript">
function message(){
alert("不要移开，点击后进行慕课网!"); }
</script>
</head>
<body>
<form>
<a href="http://www.imooc.com" onmouseout="message()">点击我</a>
</form>
</body>
</html>
4 Acara fokus kursor (onfocus)
Apabila objek dalam halaman web memperoleh fokus, atur cara yang melaksanakan panggilan onfocus dilaksanakan.
Apabila senarai juntai bawah mendapat fokus, panggil fungsi mesej() dan kotak dialog akan muncul ""Sila pilih pekerjaan semasa anda! ”.
<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title> 光标聚焦事件 </title>
<script type="text/javascript">
function message(){
alert("请选择，您现在的职业！");
}
</script>
</head>
<body>
请选择您的职业：<br>
<form>
<select name="career" onfocus="message()">
<option>学生</option>
<option>教师</option>
<option>工程师</option>
<option>演员</option>
<option>会计</option>
</select>
</form>
</body>
</html>
5. Acara tidak fokus (dikaburkan)
Acara onblur dan onfocus ialah peristiwa relatif Apabila kursor meninggalkan objek yang sedang difokuskan, acara onblur dicetuskan dan program yang dipanggil dilaksanakan pada masa yang sama.
<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title> 失焦事件 </title>
<script type="text/javascript">
function message(){
alert("请确定已输入密码后，在移开!"); }
</script>
</head>
<body>
<form>
用户:
<input name="username" type="text" value="请输入用户名！" >
密码:
<input name="password" type="text" value="请输入密码！" onblur="message()">
</form>
</body>
</html>
6 Acara pemilihan kandungan (onelect)
Pilih acara, apabila teks dalam kotak teks atau medan teks dipilih, acara onselect akan dicetuskan dan program yang dipanggil akan dilaksanakan.
Apabila teks dalam kotak teks profil peribadi dipilih, acara pada pilihan dicetuskan dan kotak dialog muncul.
<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title> 内容选中事件 </title>
<script type="text/javascript">
function message(){
alert("您触发了选中事件！"); }
</script>
</head>
<body>
<form>
个人简介：<br>
<textarea name="summary" cols="60" rows="5" onselect="message()">请写入个人简介，不少于200字！</textarea>
</form>
</body>
</html>
7. Peristiwa perubahan kandungan kotak teks (bertukar)
Cetuskan acara onchange dengan menukar kandungan kotak teks dan laksanakan program yang dipanggil pada masa yang sama.
<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title> 文本框内容改变事件 </title>
<script type="text/javascript">
function message(){
alert("您改变了文本内容！"); }
</script>
</head>
<body>
<form>
个人简介：<br>
<textarea name="summary" cols="60" rows="5" onchange="message()">请写入个人简介，不少于200字！</textarea>
</form>
</body>
</html>8 Memuatkan acara (dimuat)
Acara akan berlaku serta-merta selepas halaman dimuatkan dan program yang dipanggil akan dilaksanakan pada masa yang sama.
Nota: 1. Apabila halaman dimuatkan, acara onload dicetuskan dan acara ditulis dalam teg
<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title> 加载事件 </title>
<script type="text/javascript">
function message(){
alert("加载中，请稍等…"); }
</script>
</head>
<body onload="message()">
欢迎学习JavaScript。
</body>
</html>
9. Acara Punggah (selepas muat)
Apabila pengguna keluar dari halaman (halaman ditutup, muat semula halaman, dll.), acara onUnload dicetuskan dan program yang dipanggil dilaksanakan pada masa yang sama.
Nota: Penyemak imbas yang berbeza mempunyai sokongan yang berbeza untuk acara semasa beban.
<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title> 卸载事件 </title>
<script type="text/javascript">
window.onunload = onunload_message;
function onunload_message(){
alert("您确定离开该网页吗？");
}
</script>
</head>
<body onunload="onunload_message">
欢迎学习JavaScript。
</body>
</html>
Keputusan ujian menunjukkan bahawa ia hanya dilaksanakan dalam pelayar IE dan bukan dalam pelayar lain.
Di atas ialah sembilan keadaan respons acara Javascript, saya harap ia akan membantu pembelajaran semua orang.
![[Web front-end] Permulaan pantas Node.js](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
