js基本事件

時間 2019-11-08

原文原文鏈接

1:單擊事件 --onclickjavascript

1 function test01(){
2     alert("js的單擊事件");
3 }

2:雙擊事件--ondblclickcss

1 function test02(){
2     alert("js的雙擊事件");
3 }

3:鼠標移動事件--onmousemovehtml

1 function testOnmousemove(){
2     alert("鼠標劃到div框就觸發事件");
3 }

4:當鼠標移進去觸發的事件-- onmouseenterjava

1 function testOnmouseenter(){
2     alert("我進來了");
3 }

5:當鼠標移出觸發的事件--onmouseoutide

1 function testOnmouseout(){
2     alert("我出來了");
3 }

6:鍵盤按下並彈起的時候會觸發事件 --onkeyupthis

1 function testOnkeyup(str){
2     alert(str);
3 }

7:成爲焦點--onfocusspa

8:當對象失去焦點 --onblur.若是輸入框裏面沒有內容就顯示--請輸入用戶名,若是輸入框裏面有內容就不作其餘操做code

1 function testOnblur(str){
2     //alert(str)
3     if(str==""){
4         document.getElementById("textid").value="請輸入內容";
5     }else{
6         return;
7     }
8 }

9:當對象發生改變的時候-- onchangehtm

1 function testOnchange(str){
2     alert(str);
3 }

10:頁面裝載完成後觸發的代碼 --onload對象

1 function testOnload(){
2     var d = new Date();
3         var str = d.getFullYear()+"-"+(d.getMonth()+1)+"-"+d.getDate()+" "+d.getHours()+":"+d.getMinutes()+":"+d.getSeconds();
4         //獲取divdate對象
5         document.getElementById("divdate").innerText = str;
6         window.setTimeout(testOnload,1000);
7 }

詳情代碼：

 1 <!DOCTYPE html>
 2 <html>
 3     <head>
 4         <meta charset="UTF-8">
 5         <title>js事件</title>
 6         <style type="text/css">
 7             #div01{
 8                 border: solid 1px red;
 9                 width: 140px;height: 50px;
10             }
11             #div02{
12                 border: solid 1px green;
13                 width: 140px;height: 50px;
14             }
15         </style>
16     </head>
17     <body onload="testOnload();">
18         <div id="divdate" style="border: solid 1px red;height: 20px;width: 175px;">
19         
20         </div>
21         <input type="button" value="單擊事件" onclick="test01();" />
22         <input type="button" value="雙擊事件" ondblclick="test02();" />
23         <div id="div01" onmousemove="testOnmousemove();"></div><br />
24         <div id="div02" onmouseenter="testOnmouseenter();" onmouseout="testOnmouseout();"></div><br />
25         <input type="text" value="" onkeyup="testOnkeyup(this.value);"/> <br />
26         <input type="text" id="textid" value="請輸入內容" onfocus="this.value=''" onblur="testOnblur(this.value);" />
27         <input type="text" placeholder="請輸入用戶名" value="" /><br />
28         <select onchange="testOnchange(this.value);">
29             <option value="1">6K</option>
30             <option value="2">10K</option>
31             <option value="3">20K</option>
32             <option value="4">40K</option>
33         </select>
34     </body>
35     
36     <script type="text/javascript">
37         //1:單擊事件 --onclick
38         function test01(){
39             alert("js的單擊事件");
40         }
41         //2:雙擊事件--ondblclick
42         function test02(){
43             alert("js的雙擊事件");
44         }
45         //3:鼠標移動事件--onmousemove
46         function testOnmousemove(){
47             alert("鼠標劃到div框就觸發事件");
48         }
49         //4:當鼠標移進去觸發的事件-- onmouseenter
50         function testOnmouseenter(){
51             alert("我進來了");
52         }
53         //5:當鼠標移出觸發的事件--onmouseout
54         function testOnmouseout(){
55             alert("我出來了");
56         }
57         //6:鍵盤按下並彈起的時候會觸發事件 --onkeyup
58          function testOnkeyup(str){
59              alert(str);
60          }
61          //7:成爲焦點--onfocus
62         /* function testOnfocus(){
63              
64          }*/
65         //8:當對象失去焦點 --onblur
66         //若是輸入框裏面沒有內容就顯示--請輸入用戶名
67         //若是輸入框裏面有內容就不作其餘操做
68         function testOnblur(str){
69             //alert(str)
70             if(str==""){
71                 document.getElementById("textid").value="請輸入內容";
72             }else{
73                 return;
74             }
75         }
76         //9:當對象發生改變的時候-- onchange
77         function testOnchange(str){
78             alert(str);
79         }
80         //10:頁面裝載 完成後觸發的代碼 --onload
81         function testOnload(){
82             var d = new Date();
83                 var str = d.getFullYear()+"-"+(d.getMonth()+1)+"-"+d.getDate()+" "+d.getHours()+":"+d.getMinutes()+":"+d.getSeconds();
84                 //獲取divdate對象
85                 document.getElementById("divdate").innerText = str;
86                 window.setTimeout(testOnload,1000);
87         }
88     </script>
89 </html>

View Code

相關標籤/搜索

每日一句

每一个你不满意的现在，都有一个你没有努力的曾经。