<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title></title>
<script type="text/javascript">
//点击事件
function testClick(){
console.log("Clicked");
}
//双击事件
function testDblClick(){
console.log("dblClick");
}
//当鼠标移动到某一个（DOM）对象上方的时候
function testMouseOver(){
console.log("over");
//console.log(this.style.backgroundColor="green")
document.getElementById("div").style.backgroundColor="green";
}
//表示鼠标在某一个（DOM）对象的上面移动的时候
function testMouseMove(){
console.log("move");
}
//从一个对象上面离开的时候
function testMouseLeave(){
console.log("leave")
document.getElementById("div").style.backgroundColor="#fff";
}
//鼠标从一个对象上面离开的时候 Leave和out已经合并 可以直接使用out
function testMouseOut(){
console.log("out")
}
/**
* onload与自执行函数：
* onload在文档加载完成以后执行
* 自执行函数只要解析到 就会执行
*/
onload = function () {
console.log("onload");
}
</script>
<style type="text/css">
div{
width: 100px;
height: 100px;
margin: 20px;
border: 1px solid red;
}
</style>
</head>
<body>
<input type="button" onclick="testClick()" value="Click">
<input type="button" ondblclick="testDblClick()" value="dblclick">
<div onmouseover="testMouseOver()" id="div" onmouseleave="testMouseLeave()">
Over
</div>
<div onmousemove="testMouseMove()" onmouseout="testMouseOut()">
Move
</div>
</body>
</html>
