1、document
如果想要给整个页面添加事件,可以给document加事件。
document.οnclick=function()
{
}
2、什么是event对象?
用来获取事件的详细信息:鼠标位置、键盘按键
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>无标题文档</title>
<script>
window.οnlοad=function ()
{
document.οnclick=function (ev)
{
//处理兼容性写法,火狐ev,IEevent
var oEvent=ev||event;
document.title='('+oEvent.clientX+','+oEvent.clientY+')';
}
}
</script>
</head>
<body>
</body>
</html>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>无标题文档</title>
<style>
body {height:2000px;}
#div1 {width:100px; height:100px; background:red; position:absolute;}
</style>
<script>
//封装了获取鼠标位置的函数
function getPos(ev)
{
var scrollTop=document.documentElement.scrollTop||document.body.scrollTop;
var scrollLeft=document.documentElement.scrollLeft||document.body.scrollLeft;
return {x: scrollLeft+ev.clientX, y: scrollTop+ev.clientY};
}
document.οnmοusemοve=function (ev)
{
var oDiv=document.getElementById('div1');
var oEvent=ev||event;
var pos=getPos(oEvent);
oDiv.style.top=pos.y+'px';
oDiv.style.left=pos.x+'px';
}
</script>
</head>
<body >
<div id="div1"></div>
</body>
</html>
类似老鹰抓小鸡效果
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>无标题文档</title>
<style>
body {height:2000px;}
div {width:10px; height:10px; background:red; position:absolute;}
</style>
<script>
//封装了获取鼠标位置的函数
function getPos(ev)
{
var scrollTop=document.documentElement.scrollTop||document.body.scrollTop;
var scrollLeft=document.documentElement.scrollLeft||document.body.scrollLeft;
return {x: scrollLeft+ev.clientX, y: scrollTop+ev.clientY};
}
document.οnmοusemοve=function (ev)
{
var aDiv=document.getElementsByTagName('div');
var oEvent=ev||event;
var pos=getPos(oEvent);
for(var i=aDiv.length-1;i>0;i--)
{
//后一个跟着前一个
aDiv[i].style.left=aDiv[i-1].offsetLeft+'px';
aDiv[i].style.top=aDiv[i-1].offsetTop+'px';
}
aDiv[0].style.top=pos.y+'px';
aDiv[0].style.left=pos.x+'px';
}
</script>
</head>
<body >
<div ></div>
<div ></div>
<div ></div>
<div ></div>
<div ></div>
<div ></div>
<div ></div>
<div ></div>
<div ></div>
<div ></div>
<div ></div>
</body>
</html>
键盘控制左右运动
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>无标题文档</title>
<style>
#div1 {width:100px; height:100px; background:red; position:absolute;}
</style>
<script>
document.οnkeydοwn=function (ev)
{
var oEvent=ev||event;
var oDiv=document.getElementById('div1');
if(oEvent.keyCode==37)
{
oDiv.style.left=oDiv.offsetLeft-10+'px';
}
if(oEvent.keyCode==39)
{
oDiv.style.left=oDiv.offsetLeft+10+'px';
}
}
</script>
</head>
<body>
<div id="div1">
</div>
</body>
</html>
3、拖拽
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>无标题文档</title>
<style>
#div1 {width:100px; height:100px; background:red; position:absolute;}
/*.box {border:1x dashed black; position:absolute;}*/
</style>
<script>
window.οnlοad=function ()
{
var oDiv=document.getElementById("div1");
var disX=0;
var disY=0;
oDiv.οnmοusedοwn=function (ev)
{
var oEvent=ev||event;
disX=oEvent.clientX-oDiv.offsetLeft;
disY=oEvent.clientY-oDiv.offsetTop;
document.οnmοusemοve=function (ev)
{
var oEvent=ev||event;
var l=oEvent.clientX-disX;
var t=oEvent.clientY-disY;
oDiv.style.left=l+'px';
oDiv.style.top=t+'px';
}
document.οnmοuseup=function ()
{
document.οnmοusemοve=null;
document.οnmοuseup=null;
}
}
}
</script>
</head>
<body>
<div id="div1">
</div>
</body>
</html>
4、带虚线框拖拽
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>无标题文档</title>
<style>
#div1 {width:100px; height:100px; background:red; position:absolute;}
.box {border:1px dashed black; position:absolute;}
</style>
<script>
window.οnlοad=function ()
{
var oDiv=document.getElementById("div1");
var disX=0;
var disY=0;
oDiv.οnmοusedοwn=function (ev)
{
var oEvent=ev||event;
disX=oEvent.clientX-oDiv.offsetLeft;
disY=oEvent.clientY-oDiv.offsetTop;
//创建虚线框
var oBox=document.createElement('div');
oBox.className='box';
//设置虚线框的宽高跟div宽高相同
oBox.style.width=oDiv.offsetWidth-2+'px';
oBox.style.height=oDiv.offsetHeight-2+'px';
//设置虚线框的位置跟div的位置相同
oBox.style.left=oDiv.offsetLeft+'px';
oBox.style.top=oDiv.offsetTop+'px';
//将虚线框加入到body中去
document.body.appendChild(oBox);
document.οnmοusemοve=function (ev)
{
var oEvent=ev||event;
var l=oEvent.clientX-disX;
var t=oEvent.clientY-disY;
oBox.style.left=l+'px';
oBox.style.top=t+'px';
}
document.οnmοuseup=function ()
{
document.οnmοusemοve=null;
document.οnmοuseup=null;
//拖拽松开之后将div的位置设置到与虚线框相同位置上
oDiv.style.left=oBox.offsetLeft+'px';
oDiv.style.top=oBox.offsetTop+'px';
document.body.removeChild(oBox);
}
return false;
}
}
</script>
</head>
<body>
<div id="div1">
</div>
</body>
</html>