JavaScrip学习笔记3--event事件、拖拽

来源：互联网发布：python编写购物车程序编辑：程序博客网时间：2024/05/29 14:30

1、document

如果想要给整个页面添加事件，可以给document加事件。

document.onclick=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.onload=function (){document.onclick=function (ev){//处理兼容性写法，火狐ev，IEeventvar 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.onmousemove=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.onmousemove=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.onkeydown=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.onload=function (){var oDiv=document.getElementById("div1");var disX=0;var disY=0;oDiv.onmousedown=function (ev){var oEvent=ev||event;disX=oEvent.clientX-oDiv.offsetLeft;disY=oEvent.clientY-oDiv.offsetTop;document.onmousemove=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.onmouseup=function (){document.onmousemove=null;document.onmouseup=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.onload=function (){var oDiv=document.getElementById("div1");var disX=0;var disY=0;oDiv.onmousedown=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.onmousemove=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.onmouseup=function (){document.onmousemove=null;document.onmouseup=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>

0 0