一、文本框事
1. 文本框获得焦点：focus
2. 文本框失去焦点：blur
3. 键盘按下：keydown
4. 键盘被按下的过程：keypress
5. 键盘弹起：keyup
二、 鼠标事件
1. 鼠标移上：mouseover
2. 鼠标移出：mouseout
3. 鼠标按下：mousedown
4. 鼠标弹起：mouseup
5. 鼠标移动：mousemove
三、按钮事件
1. 单击：click
2. 双击：dblclick
四、 一个html解决—演示原代码
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"> <title>Insert title here</title> <style type="text/css"> #e02, #e022 { border: 1px solid #000000; height: 200px; width: 200px; } </style> <script type="text/javascript"> //页面卸载前 window.onbeforeunload = function(){ return "在玩一会吧？"; } // 页面加载事件：当整个html页面加载成功调用 window.onload = function(){ // 文本框事件 var e01 = document.getElementById("e01"); e01.onfocus = function(){ html("textMsg","文本框获得焦点：focus"); } e01.onblur = function(){ html("textMsg","文本框失去焦点：blur"); } e01.onkeydown = function(){ html("textMsg","键盘按下：keydown；"); } e01.onkeypress = function(event){ var event = event || window.event; append("textMsg","键盘按：keypress ("+ String.fromCharCode(event.keyCode)+")；"); } e01.onkeyup = function(){ append("textMsg","键盘弹起：keyup；"); } // 鼠标事件 var e02 = document.getElementById("e02"); e02.onmouseover = function(){ html("divMsg","鼠标移上：mouseover"); } e02.onmouseout = function(){ html("divMsg","鼠标移出：mouseout"); } e02.onmousedown = function(){ html("divMsg","鼠标按下：mousedown"); } e02.onmouseup = function(){ html("divMsg","鼠标弹起：mouseup"); } var e022 = document.getElementById("e022"); e022.onmousemove = function(event){ var event = event || window.event; html("divMsg2","鼠标移动：mousemove , " + event.clientX + " -- " + event.clientY); }; // 按钮事件 var e03 = document.getElementById("e03"); e03.onclick = function () { html("buttonMsg","单击：click"); }; e03.ondblclick= function () { html("buttonMsg","双击：dblclick"); }; }; /** * 指定位置显示指定信息 * @param objId ，元素的id属性值 * @param text，需要显示文本信息 */ function html(objId,text){ document.getElementById(objId).innerHTML = text; } /** * 指定位置追加指定信息 * @param objId ，元素的id属性值 * @param text，需要显示文本信息 */ function append(objId,text){ document.getElementById(objId).innerHTML += text; } </script> </head> <body> <input id="e01" type="text" /><span id="textMsg"></span> <hr/> <div id="e02" ></div><span id="divMsg"></span> <hr/> <div id="e022" ></div><span id="divMsg2"></span> <hr/> <input id="e03" type="button" value="可以点击"/><span id="buttonMsg"></span> </body> </html>
五、html页面图片展示
