js基本事件

1:单击事件 --onclick

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

2:双击事件--ondblclick

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

3:鼠标移动事件--onmousemove

1 function testOnmousemove(){
2     alert("鼠标划到div框就触发事件");
3 }

4:当鼠标移进去触发的事件-- onmouseenter

1 function testOnmouseenter(){
2     alert("我进来了");
3 }

5:当鼠标移出触发的事件--onmouseout

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

6:键盘按下并弹起的时候会触发事件 --onkeyup

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

7:成为焦点--onfocus

8:当对象失去焦点 --onblur.如果输入框里面没有内容就显示--请输入用户名,如果输入框里面有内容就不做其他操作

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

9:当对象发生改变的时候-- onchange

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; 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