原生的JavaScript 鼠标事件和键盘事件
JavaScript 鼠标事件有以下8种：
onmousedown
鼠标的键钮被按下。
onmouseup
鼠标的键钮释放弹起。
onclick
鼠标左键（或中键）被单击。
事件触发顺序是：onmousedown -> onmouseup -> onclick
ondblclick
鼠标左键（或中键）被双击。
事件触发顺序是：onmousedown -> onmouseup -> onclick -> onmousedown -> onmouseup -> onclick -> ondblclick。
oncontextmenu
弹出右键菜单，它可能是鼠标右键触发的，也可能是键盘的菜单键触发的。
onmouseover
鼠标移动到目标上方。
onmouseout
鼠标从目标上方移出。
onmousemove
鼠标在目标上方移动
注意：事件名称大小写敏感。若需要监听以上事件，则在事件名的前面加个on即可。
事件区别
onmouseover、onmouseout：鼠标移动到自身时候会触发事件，同时移动到其子元素身上也会触发事件
onmouseenter、onmouseleave：鼠标移动到自身是会触发事件，但是移动到其子元素身上不会触发事件
全局事件对象event
event.x
事件发生时鼠标的位置
event.y
事件发生时鼠标的位置
button
鼠标的哪一个键触发的事件
0
鼠标左键
1
鼠标中键
2
鼠标右键
代码范例1:
<html>
<body>
<script type="text/javascript">
function appendText(str) {
document.body.innerHTML += str + "<br/>";
}
document.onmousedown = function() {
appendText("onmousedown");
appendText("button = " + event.button);
appendText("(x,y) = " + event.x + "," + event.y);
}
document.onmouseup = function() {
appendText("onmouseup");
}
document.onclick = function() {
appendText("onclick");
}
document.ondblclick = function() {
appendText("ondblclick");
}
document.oncontextmenu = function() {
appendText("oncontextmenu");
}
document.onmouseover = function() {
appendText("onmouseover");
}
document.onmouseout = function() {
appendText("onmouseout");
}
document.onmousemove = function() {
appendText("mousemove");
}
</script>
</body>
</html>
代码范例2：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>鼠标事件</title>
</head>
<body>
<button onclick="myClick()">鼠标单击</button>
<button ondblclick="myDBClick()">鼠标双击</button>
<button onmousedown="myMouseDown()" onmouseup="myMouseUp()">鼠标按下和抬起</button>
<button onmouseover="myMouseOver()" onmouseout="myMouseOut()">鼠标悬浮和离开</button>
<button onmousemove="myMouseMove()">鼠标移动</button>
<button onmouseenter="myMouseEnter()" onmouseleave="myMouseLeave()">鼠标进入和离开</button>
</body>
<script>
function myClick() {
console.log("你单击了按钮！");
}
function myDBClick() {
console.log("你双击了按钮！");
}
function myMouseDown() {
console.log("鼠标按下了！");
}
function myMouseUp() {
console.log("鼠标抬起了！");
}
function myMouseOver() {
console.log("鼠标悬浮！");
}
function myMouseOut() {
console.log("鼠标离开！")
}
function myMouseMove() {
console.log("鼠标移动！")
}
function myMouseEnter() {
console.log("鼠标进入！")
}
function myMouseLeave() {
console.log("鼠标离开！")
}
</script>
</html>
JavaScript 键盘事件有以下3种：
keydown：按键按下
keyup：按键抬起
keypress：按键按下抬起
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>键盘事件</title>
</head>
<body>
<input id="name" type="text" onkeydown="myKeyDown(this.id)" onkeyup="myKeyUp(this.id)">
</body>
<script>
/*输出输入的字符*/
function myKeyDown(id) {
console.log(document.getElementById(id).value);
}
/*按键结束，字体转换为大写*/
function myKeyUp(id) {
var text = document.getElementById(id).value;
document.getElementById(id).value = text.toUpperCase();
}
</script>
</html>
JavaScript HTML事件
load：文档加载完成
select：被选中的时候
change：内容被改变
focus：得到光标
resize：窗口尺寸变化
scroll：滚动条移动