<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>事件</title>
<style type="text/css">
div{width: 100px;height: 100px;background: skyblue;}
.one{background: red;}
.two{background: skyblue;}
</style>
</head>
<body>
<script type="text/javascript">
/*脚本模型:现代事件绑定
在JavaScript中完成事件的绑定
obj.onclick=function(){};
this 当前对象 作用域对象
onmouseover 经过 onmouseenter 进入
onmouseout 离开 onmouseleave 离开*/
</script>
<button id="btn">点我</button>
<div id="box"></div>
<script type="text/javascript">
var o=document.getElementById("btn");
o.onclick=function(){
alert("click");
}
o.onmouseover=function(){
console.log("over");
}
o.onmouseout=function(){
console.log("out");
}
var b=document.getElementById("box");
b.onmouseover=function(){
this.className="one"
}
b.onmouseout=function(){
this.className="two"
}
</script>
</body>
</html>