event事件对象（1）

event

Event 对象代表事件的状态，比如事件在其中发生的元素、键盘按键的状态、鼠标的位置、鼠标按钮的状态。

兼容性处理

在 W3C 规范中，event 对象是随事件处理函数传入的，Chrome、FireFox、Opera、Safari、IE9.0及其以上版本都支持这种方式；但是对于 IE8.0 及其以下版本，event 对象必须作为 window 对象的一个属性

IE、Chrome：event是一个内置的全局对象

标准下/FF：事件对象是通过事件函数的第一个参数传入（如果一个函数是被事件调用的，那么这个函数定义的第一个参数就是事件对象）

document.onclick = function () {
  var ev = ev || event;
  alert('处理兼容');
}

鼠标指针位置

属性	说明
clientX	以浏览器视口（可视区）左上顶角为原点，定位 x 轴坐标（不受滚动条影响）
clientY	以浏览器视口（可视区）左上顶角为原点，定位 y 轴坐标（不受滚动条影响）
offsetX	以当前事件的目标对象左上角为原点，定位 x 轴坐标
offsetY	以当前事件的目标对象左上角为原点，定位 y 轴坐标
pageX	以 Document 对象（即文本窗口）左上角为原点，定位 x 轴坐标（受滚动条影响）
pageY	以 Document 对象（即文本窗口）左上角为原点，定位 y 轴坐标（受滚动条影响）
screenX	以物理屏幕左上角为原点，定位 x 轴坐标（仅受分辨率影响）
screenY	以物理屏幕左上角为原点，定位 y 轴坐标（仅受分辨率影响）
layerX	最近的绝对定位的父元素（如果没有，则为 Document 对象）左上角为原点，定位 x 轴坐标
layerY	最近的绝对定位的父元素（如果没有，则为 Document 对象）左上角为原点，定位 y 轴坐标

例子

<body>
    <img id="cat" src="https://i1.hdslb.com/bfs/face/84ffc31cf80b06b84400c26355e82b925ff15f0e.jpg@96w_96h_1c_1s.webp" alt=""/>
</body>
<script>
const cat = document.getElementById('cat')
cat.ondragstart = function (e) {
  console.log('start move')
  offsetX = e.offsetX
  offsetY = e.offsetY
  console.log(e)
}
cat.ondrag = function (e) {
  console.log('on moving')
  var x = e.pageX
  var y = e.pageY
  console.log(`${x} - ${y}`)
  if (x === 0 && y === 0) return
  x -= offsetX
  y -= offsetY
  cat.style.left = e.pageX + 'px'
  cat.style.top = e.pageY + 'px'
}
cat.ondragend = function (e) {
  console.log('move end')
}
</script>