105.事件对象及兼容处理

var oDiv = document.getElemnetById("div1");

// 不仅仅把绑定的方法执行了，而且浏览器还默认的给这个方法传递了一个参数值MouseEvent :鼠标事件对象

　　1）它是一个对象数据类型的值，里面包含了很多的属性名和属性值，这些都是用来记录当前鼠标的相关信息的

　　2）MouseEvent -->UIEvent --> Event -->Object

　　3）MouseEvent 记录的是页面中唯一一个鼠标每一次触发时候的相关信息，和到底是在哪个元素上触发的没有关系

　　oDiv.onclick = function () {

　　　　console.dir(arguments) // MouseEvent 

　　}

　　4）关于事件对象MouseEvent的兼容问题

　　　　a）事件对象本身的获取存在兼容问题：标准浏览器中是浏览器给方法传递的参数，我们只需要定义形参e就可以获取到；

　　　　　　在ie6-8中浏览器不会给方法传递参数，我们如果需要的话需要到widow.event中获取查找；

　　　　b）

　　　　oDiv.onclick = function (e) {

　　　　　e = e ||  window.event;

　　　　　e.target = e.target || e.srcElement;

　　　　　e.pagex = e.pageX || (e.clientX + (document.documentElement.scrollLeft || doucument.body.scrollLeft));

　　　　　e.pageY = e.pageY || (e.clientY + (document.documentElement.scrollTop || document.body.scrollTop));

　　　　　e.preventDefault ? e.preventDefault() : e.returnValue = false;

　　　　　// e.type; 存储的是当前鼠标触发的行为类型

　　　　　// e.clientX /e.clientY; 当前鼠标触发点距离当前屏幕左上角的x/y轴的坐标值

　　　　　// e.target;  事件源，当前鼠标触发的是哪个元素，那么它存储的就是哪个元素，但是在ie6-8中不存在这个属性（e.target的值是undefined），我们使用e.srcElement来获取事件源　　

　　　　　// e.pageX / e.pageY：当前鼠标触发点距离body左上角（页面第一屏幕最左上端）的x/y轴的坐标，但是在IE6-8中没有这个属性,我们通过使用clientY+滚动条卷去的高度获取也可以

　　　　　// e.stopPropagation：阻止事件的冒泡传播，在IE6-8中不兼容，使用e.cancelBubble = true来代替

　　　　　// e.preventDefault：阻止浏览器的默认行为，在IE6-8中没有这个方法我们需要使用e.returnValue = false来代替

　　　　　// 给li加：hover伪类在IE6浏览器中是不兼容的，只有a标签的这个伪类才是兼容所有浏览器的

　　　　　<li><a href="javascript:;"></a></li> //直接在html结构上阻止a标签的默认行为

　　　　    <li><a href="javascript:void (0);"></a></li>

　　　　　<li><a href="javascript:void (1);"></a></li>

　　　　}

//  不仅仅把绑定的方法执行了，而且浏览器还默认的给这个方法传递了一个参数值KeyboardEvent :键盘事件对象

　　var input1 = document.getElementById("input1");

　　input1.onkeyup = function(e) {

　　　　e = window.event || e;

　　　　// ->KeyboardEvent

　　　　// e.keyCode：当前键盘按键上每一个键对应的值

　　}