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>
