我们对元素进行点击操作时候，会产生一个 ​​Event​​ 的对象，那么它都有些什么呢？本文带你了解一下：

<button id="demo">event</button>
<script>let demo = document.getElementById('demo');
  demo.addEventListener('click', function(event) {
    console.log(event)
  })
</script>

了解 Javascript Event 对象_只读属性

如上图，​​Event​​ 对象包含众多的属性和方法。我们来了解比较重要的几个...

clientX / clientY

​​clientX​​​ 和 ​​clientY​​​ 都是只读属性，提供发生事件时的客户端区域的水平坐标和垂直坐标。不管页面是否滚动，客户端区域的左上角的 ​​clientX​​​ 和 ​​clientY​​​ 都是 ​​0​​。

注意：以**可视区域（客户端）**的左上角位置为原点

了解 Javascript Event 对象_HTML_02

offsetX / offsetY

​​offsetX​​​ 和 ​​offsetY​​​ 都是只读属性，规定了事件对象与目标节点的内填充边在 ​​X​​​ 或 ​​Y​​ 轴上的偏移量。

注意：以目标元素的（含 ​​padding​​ ）左上角位置为原点

了解 Javascript Event 对象_JavaScript_03

screenX / screenY

​​screenX​​​ 和 ​​screenY​​ 都是只读属性，提供事件鼠标在全局（屏幕）中的水平和垂直距离。

注意：以屏幕的左上角位置为原点

点击的元素位置相对电脑屏幕的左上角为坐标原点计算。得到的数值感觉不是很准，了解一下就好...

layerX / layerY

​​layerX​​​ 和 ​​layerY​​ 都是只读属性。

若目标元素自身有定位属性的话，就目标元素（包含 ​​padding​​​ ）的左上角作为原点计算。 若目标元素自身没有定位属性的话，往上找有定位属性的父元素的左上角为原点计算距离。 若父元素都没有定位属性的话，那么就以 ​​​body​​ 元素的左上角为原点计算。

用得也不多，了解下就行...

pageX / pageY

​​pageX​​​ 和 ​​pageY​​ 都是只读属性，表示相对于整个文档的水平或者垂直坐标。这两个属性是基于文档边缘，考虑任何页面的水平或者垂直方向上的滚动。

注意：以文档的左上角位置为原点

了解 Javascript Event 对象_前端_04

区别这么多的属性，最主要是确定原点应该在哪里。

读过之后，你是否已经对文章 Angular 结合 rxjs 实现拖拽 中的相关计算有所感悟呢？

【完】✅