js进阶小知识1

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

事件通常与函数结合使用，函数不会在事件发生前被执行！

常见属性：红色箭头 （以文档为例子）

clientX和clientY:显示鼠标点击相对于文档的坐标

pageX和pageY:在显示鼠标相对于文档的情况下 也加上滚动的高度或宽度

screenX和screenY:可视区域的鼠标坐标

小案例：实现盒子里鼠标移动相对盒子的坐标（原理：将clientX减去盒子的offsetLeft)

2.Json 数据传递基本用json

。数据在键值对中

。数据由逗号分离

。花括号保存对象

。方括号保存数组

兼容重要点：document.compatMode的用法：获取页面宽高

在Standards Mode下对于盒模型的解释和其他的标准浏览器是一样，在Quirks Mode模式下则有很大差别，而在不声明Doctype的情况下，IE默认又是Quirks Mode。

document.compatMode正好派上用场，它有两种可能的返回值：BackCompat和CSS1Compat。

BackCompat：标准兼容模式关闭（不遵循w3c标准），浏览器客户区宽度document.body.clientWidth

CSS1Compat：标准兼容模式开启（遵循w3c标准），浏览器客户区宽度document.documentElement.clientWidth

用json封装scroll兼容（获取页面滚动的头部距离和左部距离）：

封装scroll