事件对象:事件被触发时,浏览器会将事件对象作为实参传递进响应函数,在事件对象中,封装了与事件有关的信息,比如:鼠标的移动、键盘哪个按键被按下了,或者鼠标滑轮的滚动…
-
clientX属性:需要通过event事件进行调用,可以获取鼠标相对于当前窗口的水平坐标
-
clientY属性:需要通过event事件进行调用,可以获取鼠标相对于当前窗口的垂直坐标
练习:鼠标在id为quyu的div中移动的时候,在id为zhanshi的div中显示鼠标的坐标,代码如下:
<script type="text/javascript">
window.onload = function(){
var quyu = document.getElementById("quyu");
var zhanshi = document.getElementById("zhanshi");
//绑定鼠标移动事件
quyu.onmousemove = function(event){
var mousex = event.clientX;
var mousey = event.clientY;
//为了解决事件的兼容性问题
event = event || window.event;
zhanshi.innerHTML = "x="+mousex+",y="+mousey;
};
};
</script>
对应的css文件如下:
```css
#quyu{
width: 450px;
height: 200px;
border: 1px solid black;
}
#zhanshi{
width: 300px;
height: 100px;
border: 1px solid black;
}