事件对象
- 概述:我们可以给元素绑定事件【DOM0、DOM2】,都有事件处理函数;
- 当事件触发的时候,事件处理函数执行,其实系统底层会给事件处理函数传递实参,我们可以用形参接受
- 系统自动注入是实参:事件对象
<script type="text/javascript">
//获取元素、绑定事件
//①不是随随便便的一个函数执行就有事件对象
var div = document.getElementsByTagName("div")[0];
//绑定单击事件
div.onclick = function(event){
//短路语法兼容事件对象
//如果是高级浏览器event
//如果是低级浏览器事件对象是作为BOM对象属性
var e = event||window.event;
console.log(e);
}
</script>
- 不是随随便便一个函数执行就有事件对象的【作为事件处理函数】
- event:高级浏览器写法 window.event:低级浏览器写法
- 事件对象在JS当中引用类型数值
screenX||screenY
注意:事件对象的身上有很多属性,其中有八个属性可以获取到鼠标位置;
概述:上面两个属性是事件对象的;它主要的作用是获取到鼠标距离屏幕左上角的零零点水平轴、垂直轴距离
获取距离屏幕左上角的坐标
<script type="text/javascript">
//获取元素inner
var inner = document.querySelector(".inner")
//给DOM对象绑定鼠标移动事件
document.onmousemove = function(event){
//短路语法进行兼容
var e = event||window.event;
console.log(e.screenX)
console.log(e.screenY)
</script>
pageX||pageY
他们两个也是事件对象的属性;主要的作用是可以获取到鼠标距离页面左上角零零点的水平轴、垂直距离;
页面出现滚动条也会以页面高度来定位
clientX||clientY
主要的作用是可以获取到鼠标距离可视区域的水平轴、垂直距离;
可是区域即眼睛可以看到的区域
offsetX||offsetY
你可以认为他们获取数据类似于pageX||pageY.
但是获取数据会受到子元素的坐标体系影响
拖拽基本使用
概述:在JS当中我们可以实现拖拽功能;
无非是三板斧【鼠标按下:onmousedown、鼠标移动:onmousemove、鼠标抬起:onmouseup】
<script type="text/javascript">
//获取div
var div = document.querySelector("div");
var idx = 0;
//鼠标按下:获取一次鼠标距离盒子左侧边沿、顶部边缘距离
div.onmousedown = function(event){
//短路语法兼容鼠标按下的事件对象
var e = event||window.event;
//使用局部变量存储其实数据【鼠标距离盒子左侧、顶部数据】
var startX = e.offsetX;
var startY = e.offsetY;
console.log("鼠标按下");
//鼠标移动
div.onmousemove = function(event){
var R = parseInt(Math.random()*255);
var G = parseInt(Math.random()*255);
var B = parseInt(Math.random()*255);
idx+=5;
//短路语法兼容鼠标移动事件对象
var e= event||window.event;
//无非改变元素left、top
div.style.left = e.clientX - startX +"px";
div.style.top = e.clientY - startY +"px";
div.style.transform = `rotate(${idx}deg)`;
div.style.border = `10px dashed rgb(${R},${G},${B})`;
}
}
//鼠标抬起事件:鼠标移动事件
document.onmouseup = function(){
div.onmousemove = null;
}
</script>
网友评论