<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Document</title>
<style>
#box{width: 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>
