-
鼠标类
单击：
click双击：
dblclick按下：
mousedown抬起：
mouseup移动：
mousemove进入：
mouseover / mouseenter离开：
mouseout / mouseleave右键：
contextmenu -
键盘类
按下：
keydown抬起：
keyup按下并抬起：
keypress -
表单类
获取焦点：focus
失去焦点：blur
输入：input
内容改变：change
提交事件：submit
重置事件：reset
-
浏览器类
加载：load
滚动：scroll
改变大小：resize
-
on绑定，赋值式绑定
元素.on事件名 = function(){}
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Document</title>
<style>
#box{ 100px;height: 100px;background: red}
</style>
</head>
<body>
<div id="box"></div>
<input type="text" id="txt">
</body>
<script>
// 鼠标事件测试
var box = document.getElementById("box");
box.onclick = function(){
console.log("单击事件发生了")
}
box.ondblclick = function(){
console.log("双击事件发生了")
}
box.onmousedown = function(){
console.log("按下事件发生了")
}
box.onmouseup = function(){
console.log("抬起事件发生了")
}
box.onmouseover = function(){
console.log("进入事件发生了")
}
box.onmouseout = function(){
console.log("离开事件发生了")
}
box.onmousemove = function(){
console.log("移动事件发生了")
}
box.oncontextmenu = function(){
console.log("右键事件发生了");
}
// 表单事件测试
var txt = document.getElementById("txt");
txt.onfocus = function(){
console.log("获取焦点事件")
}
txt.onblur = function(){
console.log("失去焦点事件")
}
txt.oninput = function(){
console.log("输入事件")
}
txt.onchange = function(){
console.log("改变内容事件")
}
</script>
</html>
如果感觉对自己有帮助，麻烦点一下关注，会一直和大家分享知识的，谢谢！！！