<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>鼠标移入移出</title>
<style>
#box{
width: 70px;
height: 25px;
line-height: 25px;
text-align: center;
}
</style>
</head>
<body>
<div id="box">我的盒子</div>
<script>
var box=document.getElementById('box');
//创建一个提示窗并且添加样式；
var o=document.createElement('div');
o.style.width="50px";
o.style.height="20px";
o.style.border="1px solid #ccc"
o.style.lineHeight="20px";
o.style.textAlign="center";
o.style.fontSize="12px";
o.innerHTML="提示信息";
o.style.position="absolute";
o.style.background="#DDDDDD";
//鼠标移入
box.addEventListener('mouseover',function(e){
console.log(e);//e 事件对象
//客户端窗口的位置 获取的是数字 没有单位
var x=e.clientX;
var y=e.clientY;
//把现在的鼠标位置 赋值给窗口的 left和top
o.style.left=x+5+'px';//加上单位
o.style.top=y+5+'px';
//当鼠标移动上去的时候把提示窗添加到body中。
document.body.appendChild(o);
},false);
//鼠标移动
box.addEventListener('mousemove',function(e){
var x=e.clientX;
var y=e.clientY;
o.style.left=x+5+'px';
o.style.top=y+5+'px';
},false);
//鼠标移出
box.addEventListener('mouseout',function(){
//鼠标移出的时候将提示窗移出
document.body.removeChild(o);
},false);
</script>
</body>
</html>事件触发的时候,系统会自动执行事件函数。 执行后会返回给事件函数 ，一个事件对象。
用参数接收。
获取事件对象后能 获取事件的所有信息！