事件易混知识点

1. offsetX / offsetY 为 鼠标事件 ，得到距离 事件源 左端 和 顶端 的距离。

   着重注意点：
   1.可以获取行内及内嵌的宽高
   2.获取到的值是一个number类型，不带单位
   3.获取的宽高包含border和padding
   4.只能读取，不能设置

   offsetWidth / offsetHeight 为 节点的 宽高。 （注意：元素的实际宽高 = width + border + padding）

   offsetLeft / offsetTop 为 获取标签元素 距离 已定位父级元素 左端 和顶端距离。

   注意 ：距离是 左/上 外边框 与 offsetParent（已定位父级） 的 左/上 内边框。

2. clientX / clientY 为 鼠标事件， 得到距离 可视化窗口 左端 和 顶端 的距离。

   clientWidth / clientHeight：获取 可视区域的宽高。（注意，不含边框只有 padding + content）

   clientTop / clientLeft : 不常用，其实就是 左边框 border-left 和上边框 border-top。

3. 其中，两者之间的结合，可以产生化学反应，得到很多想要的距离。

   比如，获得点击事件距离与节点中心点的距离：

   
   这里，有个地方需要注意一下即，若获取到窗口的距离，一般通过 client 来处理，但在这里，由于点击的 事件源 为 body ，则 offset 也可以到达窗体端点，但是仍要理清两者不同！（参考上面分析）
   纠正一下错误，offset与client中，只有offsetX/Y 鼠标事件可以直接获取到距 可视区域的距离 。
   若要得到 节点到 可视区域边界的距离 可以通过
   getBoundingClientRect() 来获取，

这个方法返回一个矩形对象，包含四个属性：left、top、right和bottom。分别表示元素各边与页面上边和左边的距离。

var box=document.getElementById(‘box’); // 获取元素

alert(box.getBoundingClientRect().top); // 元素上边距离页面上边的距离

alert(box.getBoundingClientRect().right); // 元素右边距离页面左边的距离

alert(box.getBoundingClientRect().bottom); // 元素下边距离页面上边的距离

alert(box.getBoundingClientRect().left); // 元素左边距离页面左边的距离