鼠标的常用事件：
（1）onclick 单击事件
<body>
<p id="p1" οnclick="fun()">单击事件测试</p>
</body>
<script>
function fun() {
var p1 =document.getElementById("p1");
p1.innerText= "点击事件测试成功！";
p1.style.fontSize = "40px";
}
</script>
事件源就是id为“p1”的元素，事件名就是单击，事件注册是：οnclick=“fun()”,当单击“p1”时，函数fun来进行处理。
（2）ondblclick双击事件
<style>
#div1{
height: 100px;
width: 100px;
background:#ff2f00;
}
</style>
</head>
<body>
<div id="div1"οnclick="zoomout()" οndblclick="zoomin()" >
</div>
</body>
<script>
function zoomout() {
var div1= document.getElementById("div1");
div1.style.width = "200px";
div1.style.height = "200px";
}
function zoomin() {
var div1= document.getElementById("div1");
div1.style.width = "100px";
div1.style.height = "100px";
}
</script>
（3）鼠标按下/弹起事件（onmousedown/onmouseup）
<style>
#div1{
height: 100px;
width: 100px;
background:#ff2f00;
}
</style>
</head>
<body>
<div id="div1"οnmοusedοwn="zoomout()" οnmοuseup="zoomin()" >
</div>
</body>
<script>
function zoomout() {
var div1= document.getElementById("div1");
div1.style.width = "200px";
div1.style.height = "200px";
}
function zoomin() {
var div1= document.getElementById("div1");
div1.style.width = "100px";
div1.style.height = "100px";
}
</script>
（4）鼠标移入和离开（onmouseenter/onmouseleave）
<body>
<div id="div1"οnmοuseenter="zoomout()" οnmοuseleave="zoomin()" >
</div>
</body>
<script>
function zoomout() {
var div1= document.getElementById("div1");
div1.style.width = "200px";
div1.style.height = "200px";
}
function zoomin() {
var div1= document.getElementById("div1");
div1.style.width = "100px";
div1.style.height = "100px";
}
</script>
（5）鼠标移上/移开事件（onmouseover/onmouseout）
与onmousenter和onmouseleave类似
（6）鼠标移动事件onmousemove。
（7）鼠标滚轮滚动事件onmousewheel
键盘事件
（1）keypress
function search(e) {
if (e.keyCode == 13){
var what= document.getElementById("what");
alert("开始搜索："+what.value);
}
}
keyCode属性记录了按下的键的编码。
keypress事件只能捕获可以打印字符的按键，不能捕获shift、ctrl、alt等不可打印字符的按键。
但是可以通过shiftKey、ctrlKey等属性判断在击键的同时是否按下了shift、ctrl等辅助键。
function search(e) {
alert(e.keyCode);
if(e.shiftKey){
alert("shift键也被按下了");
}
if(e.ctrlKey){
alert("ctrl键也被按下了");
}
}
（2）keydown、keyup
<body>
<input id="what"type="text" οnkeydοwn="keydown(event)">
</body>
<script>
function keydown(e) {
alert(e.keyCode);
}
</script>
keydown、keyup可以捕获键盘上所有的键（个别除外）。
<style>
#img1{
position: absolute;
}
</style>
</head>
<body οnkeydοwn="move(event)">
<img id="img1"src="ren.png">
</body>
<script>
var top1= 0;
var left = 0;
function move(e) {
switch(e.keyCode){
case 37: left -= 5;break;
case 38: top1 -= 5;break;
case 39: left += 5;break;
case 40: top1 += 5;break;
}
var img1= document.getElementById("img1");
img1.style.top= top1+"px";
img1.style.left= left+"px";
}
</script>
总结：
1）top变量会导致上下移动失败，原因是和window.top这个全局变量冲突，换个名字就好了。
2）如果把变量top1和left移到函数里边，上下左右都只能移动5个像素。原因是函数内部的局部变量在每次调用函数时都会重新创建并初始化，也就是说每一次调用left和top1的值都为0，不会保留上一次的值，如果需要保留，就只能使用全局变量。
其他事件
onload：页面加载事件
onfocus：获取焦点的事件
onblur：失去焦点
onchange：值改变事件
![主流浏览器四大综合性能测试[图]](data:image/gif;base64,R0lGODlhAQABAIAAAP///wAAACwAAAAAAQABAAACAkQBADs=)