一起养成写作习惯！这是我参与「掘金日新计划 · 4 月更文挑战」的第14天，点击查看活动详情
我们对元素进行点击操作时候，会产生一个 Event 的对象，那么它都有些什么呢？本文带你了解一下：
<button id="demo">event</button> <script> let demo = document.getElementById('demo'); demo.addEventListener('click', function(event) { console.log(event) }) </script> 复制代码
如上图，Event 对象包含众多的属性和方法。我们来了解比较重要的几个...
clientX / clientY
clientX 和 clientY 都是只读属性，提供发生事件时的客户端区域的水平坐标和垂直坐标。不管页面是否滚动，客户端区域的左上角的 clientX 和 clientY 都是 0。
注意：以**可视区域（客户端）**的左上角位置为原点
offsetX / offsetY
offsetX 和 offsetY 都是只读属性，规定了事件对象与目标节点的内填充边在 X 或 Y 轴上的偏移量。
注意：以目标元素的（含 padding ）左上角位置为原点
screenX / screenY
screenX 和 screenY 都是只读属性，提供事件鼠标在全局（屏幕）中的水平和垂直距离。
注意：以屏幕的左上角位置为原点
点击的元素位置相对电脑屏幕的左上角为坐标原点计算。得到的数值感觉不是很准，了解一下就好...
layerX / layerY
layerX 和 layerY 都是只读属性。
若目标元素自身有定位属性的话，就目标元素（包含 padding ）的左上角作为原点计算。 若目标元素自身没有定位属性的话，往上找有定位属性的父元素的左上角为原点计算距离。 若父元素都没有定位属性的话，那么就以 body 元素的左上角为原点计算。
用得也不多，了解下就行...
pageX / pageY
pageX 和 pageY 都是只读属性，表示相对于整个文档的水平或者垂直坐标。这两个属性是基于文档边缘，考虑任何页面的水平或者垂直方向上的滚动。
注意：以文档的左上角位置为原点
区别这么多的属性，最主要是确定原点应该在哪里。
读过之后，你是否已经对文章 Angular 结合 rxjs 实现拖拽 中的相关计算有所感悟呢？
