Dom操作——事件之鼠标键盘事件

一、window事件

　　onload() --- html加载完成后再执行

　　onresize() --- 浏览器窗口大小发生改变时触发

　　onscroll() --- 浏览器滚动条移动时触发

二、鼠标事件

　　onclick() --- 鼠标单击触发

　　ondblclick() --- 鼠标双击触发

　　onmouseover() --- 鼠标指针移动到元素上触发

　　onmouseout() --- 鼠标指针移开元素时触发

　　onmousedown() --- 鼠标左键按下触发

　　onmouseup() --- 鼠标左键松开触发

　　onmousemove() --- 鼠标指针在元素上移动时触发

三、键盘事件

　　onkeypress() --- 键盘按下并松开后触发

　　onkeydown() ---键盘按下触发

　　onkeyup() --- 键盘松开触发

四、例程

　　1、鼠标单击时弹出对话框、移动到元素上变色。　　　　

　　2、提示模态框，鼠标移动到元素上显示提示，或选中时显示提示。　　　

 1 <!doctype html>
 2 <html>
 3     <head>
 4         <meta charset="utf-8">
 5         <title>无标题文档</title>
 6         <style type = "text/css">
 7             body{
 8                 font-size: 12px;
 9             }
10             #content{
11                 margin: 0px auto;
12                 width:400px;
13             }
14             #tips{
15                 border: 1px solid #000;
16                 width:190px;
17                 height:40px;
18                 padding: 5px;
19                 background: orange;
20                 display: none;
21                 display: none;
22             }
23         </style>
24         <script type = "text/javascript">
25             window.onload = function(){
26                 var inp = document.getElementsByTagName('label')[0];
27                 var tip = document.getElementById('tips');
28                 var check = document.getElementById('box')
29 //                inp.onmouseover = function(){
30 //                    tip.style.display = 'block';
31 //                };
32 //                inp.onmouseout = function(){
33 //                    tip.style.display = 'none';
34 //                };
35                 
36 //                check.onchange = function(){
37 //                    if(check.checked){
38 //                        tip.style.display = 'block';
39 //                    }else{
40 //                        tip.style.display = 'none';
41 //                    }
42 //                };
43                 
44                 check.onchange = function(){
45                     tip.style.display = this.checked? 'block':'none';
46                 };
47                 
48             }
49         </script>
50     </head>
51 
52     <body>
53         <div id="content">
54             <label for = "box"><input type="checkbox" id = "box"> 两周内自动登陆</label>
55             <div id="tips">为了您的信息安全，请不要在网吧或公共电脑上使用此功能</div>
56         </div>
57     </body>
58 </html>

View Code