事件对象

• 概述：我们可以给元素绑定事件【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>