一、onload事件
onload事件会在整个页面加载完成之后才触发
为window绑定一个onload事件,该事件对应的响应函数将会在页面加载完成之后执行,这样可以确保我们的代码执行时所有dom对象已经加载完毕了。
二、响应函数onmousemove
当事件的响应函数被触发时,浏览器每次都会将一个事件作为实参传递进响应函数,在事件对象中封装了当前事件相关的一切信息,比如:鼠标的坐标 键盘哪个键被按下 鼠标滚轮滚动的方向 实现div跟随鼠标进行移动
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style type="text/css">
.box{
width: 100px;
height: 100px;
background-color: red;
position: absolute;
}
</style>
<script type="text/ecmascript">
window.onload=function(){
var box=document.getElementsByClassName("box")[0];
document.onmousemove=function(event){
event=event||window.event;
var left=event.clientX;
var right=event.clientY;
box.style.left=left+"px";
box.style.top=right+"px";
}
}
</script>
</head>
<body>
<div class="box"></div>
</body>
</html>
网友评论