第43天:事件对象event
Posted 半指温柔乐
tags:
篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了第43天:事件对象event相关的知识,希望对你有一定的参考价值。
一、事件对象
事件:onmouseover、 onmouseout、 onclick
event //事件的对象
兼容写法:var event = event || window.event;
event常见属性,如下表:
属性 |
作用 |
data |
返回拖拽对象的URL字符串(dragDrop) |
width |
该窗口或框架的高度 |
height |
该窗口或框架的高度 |
pageX |
光标相对于该网页的水平位置(ie无) |
pageY |
光标相对于该网页的垂直位置(ie无) |
screenX |
光标相对于该屏幕的水平位置 |
screenY |
光标相对于该屏幕的垂直位置 |
target |
该事件被传送到的对象 |
type |
事件的类型 |
clientX |
光标相对于该网页的水平位置 (当前可见区域) |
clientY |
光标相对于该网页的水平位置 |
二、pageX、 clientX、 screenX的区别
1、screenX 、screenY 以电脑屏幕为基准
2、pageX 、pageY 以文档(绝对定位)为基准 IE6、7、8不认识
3、clientX、 clientY 以可视区域为基准
三、其他事件
div.onmouseover 和div.onmousemove 区别
相同点都是 经过 div 才会触发
div.onmouseover 只触发一次
div.onmousemove 每移动一像素,就会触发一次
onmouseup 当鼠标弹起
onmousedown 当鼠标按下的时候
1、拖动 原理 == 鼠标按下 接着 移动鼠标 。
bar.onmousedown = function(){
document.onmousemove = function(){
}
}
当我们按下鼠标的时候,就要记录当前 鼠标 的位置 - 大盒子的位置
1、 算出 bar 当前 在 大盒子内的距离 。
三、防止选择拖动
我们知道 按下鼠标然后拖拽可以选择文字 的。
清除选中的内容
window.getSelection ? window.getSelection().removeAllRanges() : document.selection.empty();
案例:
1、鼠标点击跟随动画
1 <!DOCTYPE html> 2 <html lang="en"> 3 <head> 4 <meta charset="UTF-8"> 5 <title>鼠标点击跟随效果</title> 6 <style> 7 #image{ 8 width: 88px; 9 position: absolute; 10 left: 0; 11 top:0; 12 } 13 </style> 14 </head> 15 <body> 16 <img src="img.jpg" alt="" id="image"> 17 </body> 18 </html> 19 <script> 20 /*document.onclick=function(event){ 21 var event=event||window.event; 22 console.log(event.pageX); 23 console.log(event.clientX); 24 console.log(event.screenX); 25 26 }*/ 27 28 var image=document.getElementById("image"); 29 document.onclick=function(event){ 30 var event=event||window.event; 31 targetX=event.clientX-image.offsetWidth/2; 32 targetY=event.clientY-image.offsetHeight/2; 33 } 34 //缓动动画 35 var leaderX=0; 36 var leaderY=0; 37 var targetX=0; 38 var targetY=0; 39 setInterval(function(){ 40 leaderX=leaderX+(targetX-leaderX)/10; 41 leaderY=leaderY+(targetY-leaderY)/10; 42 image.style.left=leaderX+"px"; 43 image.style.top=leaderY+"px"; 44 },10) 45 46 </script>
运行效果:
以上是关于第43天:事件对象event的主要内容,如果未能解决你的问题,请参考以下文章
第21天SQL进阶-查询优化- performance_schema系列三:事件记录(SQL 小虚竹)