JavaScript事件與例子
阿新 • • 發佈：2022-04-29
事件，就是預先設定好的一段程式碼，等到使用者觸發的時候執行。
一：常見的事件：
1.關於滑鼠的事件
onclick 滑鼠單擊觸發 ondblclick 滑鼠雙擊觸發 onmouseover 滑鼠移上觸發 onmouseout 滑鼠離開觸發 onmousemove 滑鼠移動觸發
1 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 2 <html xmlns="http://www.w3.org/1999/xhtml"> 3 <head> 4 <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> 5 <title>無標題文件</title> 6 </head> 7 <body> 8 <input type="button" value="點選" onClick="show()" /><!--滑鼠單擊事件--> 9 </body> 10 </html> 11 <script> 12 //設定滑鼠單擊事件 13 function show(){ 14 alert("點選彈出"); 15 } 16 </script>
2.關於鍵盤的事件 onkeydown 鍵盤按下觸發 onkeyup 按鍵抬起的時候觸發 onkeypress 按鍵觸發
1 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 2 <html xmlns="http://www.w3.org/1999/xhtml"> 3 <head> 4 <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> 5 <title>無標題文件</title> 6 </head> 7 <body> 8 <input type="text" onkeydown="return noNumbers(event)" /> 9 </body> 10 </html> 11 <script type="text/javascript"> 12 function noNumbers(e) 13 { 14 var keynum; 15 var keychar; 16 keynum = window.event ? e.keyCode : e.which; 17 keychar = String.fromCharCode(keynum); 18 alert(keynum+':'+keychar); 19 } 20 </script>
3.關於表單的事件 onfocus 獲得焦點觸發 onblur 失去焦點觸發 onchange 內容改變觸發
1 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 2 <html xmlns="http://www.w3.org/1999/xhtml"> 3 <head> 4 <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> 5 <title>無標題文件</title> 6 </head> 7 <body> 8 <input type="text" value="請輸入" onblur="show()" /><!--失去焦點觸發事件--> 9 </body> 10 </html> 11 <script> 12 //設定事件 13 function show(){ 14 alert("輸入有誤"); 15 } 16 </script>
4.在js中加事件
1 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
2 <html xmlns="http://www.w3.org/1999/xhtml">
3 <head>
4 <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
5 <title>無標題文件</title>
6 </head>
7 <body>
8 <input type="text" value="請輸入" id="in" />
9 </body>
10 </html>
11 <script>
12 var a = document.getElementById("in");
13 //設定事件
14 a.onclick = function(){ //這樣的函式沒有函式名，成為匿名函式
15 alert("請輸入");
16 }
17 </script>需要注意的是，事件只能通過id單個加，js不支援統一加事件，如果需要統一加事件，可以通過迴圈實現。
二：例子
列出一堆方塊，點選其中一個改變顏色，其他不變
1 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
2 <html xmlns="http://www.w3.org/1999/xhtml">
3 <head>
4 <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
5 <title>無標題文件</title>
6 <style>
7 div{
8 margin:3px;
9 height:50px;
10 width:50px;
11 background-color:#096;
12 float:left;
13 }
14 </style>
15 </head>
16 <body>
17 <div onclick="dianJi(this)"></div> <!--this實參，代表該元素本身-->
18 <div onclick="dianJi(this)"></div>
19 <div onclick="dianJi(this)"></div>
20 <div onclick="dianJi(this)"></div>
21 <div onclick="dianJi(this)"></div>
22 <div onclick="dianJi(this)"></div>
23 <div onclick="dianJi(this)"></div>
24 </body>
25 </html>
26 <script>
27 function dianJi(a){
28 //先讓所有元素加到一個數組
29 var sy = document.getElementsByTagName("div");
30 //遍歷所有陣列顏色變回初始顏色
31 for(var i=0;i<sy.length;i++){
32 sy[i].style.backgroundColor="#096";
33 }
34 //修改傳回的元素的顏色樣式
35 a.style.backgroundColor="red";
36 }
37 </script>這裡需要注意的是，引數填this，代表返回的是這個元素本身。在例題中，加了this後，在函式中操作的就是被點選的這個元素，這樣來和其他未被點選元素區分開。
用div下拉列表
1 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
2 <html xmlns="http://www.w3.org/1999/xhtml">
3 <head>
4 <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
5 <title>無標題文件</title>
6 <style>
7 *{
8 margin:0px auto;
9 font-family:微軟雅黑;
10 }
11 #tou{
12 width:170px;
13 height:30px;
14 background-color:#CFF;
15 line-height:30px;
16 vertical-align:middle;
17 }
18 #shen{
19 width:170px;
20 height:150px;
21 line-height:30px;
22 vertical-align:middle;
23 display:none;
24 }
25 .list{
26 border:0.3px solid white;
27 background-color:#99C;
28
29 }
30 </style>
31 </head>
32
33 <body>
34 <div>
35 <div id="tou" onclick="chu">請選擇地區</div>
36 <div id="shen"><!--給列表中的每個元素都新增一個移上去觸發的事件和一個點選事件-->
37 <div class="list" onmouseover="yishang(this)" onclick="dianJi(this)">華東</div>
38 <div class="list" onmouseover="yiShang(this)" onclick="dianJi(this)">華南</div>
39 <div class="list" onmouseover="yiShang(this)" onclick="dianJi(this)">華中</div>
40 <div class="list" onmouseover="yiShang(this)" onclick="dianJi(this)">華西</div>
41 <div class="list" onmouseover="yiShang(this)" onclick="dianJi(this)">華北</div>
42 </div>
43 </div>
44 </body>
45 </html>
46 <script>
47
48 //獲取列表中每個元素新增到陣列s
49 var s=document.getElementsByClassName("list");
50 //控制列表中的元素移上去改變顏色，其他元素顏色變為初始值
51 function yiShang(a){
52 for(i=0;i<s.length;i++){
53 s[i].style.backgroundColor="#99C";
54 }
55 a.style.background="red";
56 }
57
58 //設定列表部分點選頭部一次顯示，點選兩次隱藏
59 var chu=document.getElementById("tou");
60 chu.onclick=function(a){ //匿名函式
61 var c=document.getElementById("shen");//獲取id為shen的元素
62 if(c.style.display=="none"){ //這裡判斷display的值是否是none，注意用兩個等號
63 c.style.display="block";
64 }else{
65 c.style.display="none";
66 }
67 }
68
69 //點選列表中的元素後，列表隱藏，列表的文字顯示到頂部
70 function dianJi(a){
71 document.getElementById("shen").style.display="none";
72 document.getElementById("tou").innerText=a.innerText;
73 }
74 </script>