1 事件参数e

当事件发生的时候，系统会自动的给事件处理函数传递一个参数，这个参数会提供事件相关的一些数据。这个是系统标准的参数，但是IE8及其以前版本不兼容参数e，只兼容window.event这个获得数据的方式。

2 事件参数e 浏览器兼容代码

e = e || window.event

3 e.clientX：获取鼠标在可视区域的位置

如果页面滚动后再进行获取鼠标的位置的话，会存在偏差，偏差量就是滚动出去的距离。

e.pageX：获取鼠标在页面中的位置

可以很好的获得鼠标在页面中的位置，不会因为页面的滚动而发生偏差。但是这种方法不兼容IE8及以前的版本，我能只能用e.clientX+页面滚动的距离来实现计算鼠标相对页面的距离。

pageX pageY 兼容浏览器代码：

pageX = clientX + 页面滚动出去的距离

4 offset系列、client系列、scroll系列获取的位置及大小的区别

offset系列：获取偏移量

offsetWidth、offsetHeight获取的是包括边框的盒子大小

offsetLeft、offsetTop获取的是边框外侧到offsetParent的距离

client系列：获取客户可视区域的大小

clientWidth、clientHeight获取的是除边框外盒子的大小

scroll系列：获取的是滚动内容的大小和位置

scrollWidth、scrollHeight获取的是所有内容的大小，无关盒子的大小

scrollLeft、scrollTop获取的是内容滚动出盒子边框内侧的距离

这三个系列获取的位置和大小常用于改变页面中元素的位置，client系列还可以用来获取页面可视区域的大小，这样可以通过检测用户的页面大小来改变页面的布局，可以更好的增加用户体验。

但是不同浏览器存在着各种兼容获取可视区域的方法。

function client() {

    return {

        clientWidth: window.innerWidth || document.body.clientWidth || document.documentElement.clientWidth || 0,

        clientHeight : window.innerHeight || document.body.clientHeight || document.documentElement.clientHeight || 0

    };

}

5 注册事件问题

on+事件名的方式给元素注册事件时如果遇到重复对某一个元素注册同一个事件，会发生后写事件将前面的事件覆盖掉，以至于前面的事件将不能执行。

为了解决这个问题我们先回顾下注册事件的几种方式：

第一种行内式，直接将注册事件写在元素行内，这种方法不能做到内容样式分离，项目中依懒性极强，可修改性非常差，所以不建议使用。

第二种内嵌式，将页面元素获取到后在script标签中以element.on+事件名的方式注册事件，这种方式较方便，但是如果遇到重复注册就会出现上面说的情况。

第三种就是我要说的，可以很好解决这个问题的方法，通过element.addEventListener(type,listener,useCapture)的方式注册事件，即使重复注册了事件，也可以从前到后的将每个注册的事件执行完成。

element.addEventListener(type,listener,useCapture)中第一个参数为事件名，第二个为事件处理程序，第三个参数为一个boolean值。

在ie8及其以前版本中并不能支持这种方式来注册事件，它是通过element.attachEvent(type,listener)来注册的，第一个参数为on+事件名，这个是与addEventListener最大的区别，第二参数为事件处理程序。