事件对象及兼容处理

一、什么是事件？

事件分为两部分：

1） 行为本身：浏览器天生就赋予其的行为，onclick、onmouseover、(onmouseenter)，onmouseout(onmouseleave)，onmousemove，onmouseup，onmousedown，onmousewheel（鼠标滚轮滚动行为），onscroll（滚动条滚动行为），onresize（window.onresize 浏览器的窗口大小改变事件），onload，onunload，onfocus（文本框获取焦点行为），onblur（文本框失去焦点行为），onkeydown，onkeyup（键盘的按下后抬起行为）。

哪怕我没有给上述的行为绑定方法，事件也是存在的。当我们点击这个盒子的时候，同样会触发它的onclick行为，只是什么事情也没做而已。

2）事件绑定：给元素的某一个行为绑定方法

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

//onclick这个行为定义在当前元素的私有属性上
oDiv.onclick = function () {
    //->当我们触发oDiv的click行为的时候，会把绑定的这个函数执行
};

//->false是什么意思？
//->这是第二种绑定的方法
oDiv.addEventListener("click", function () {
    console.log('ok');
}, false);

//addEventListener 这个属性是定义在当前元素所属EventTarget这个类的原型上的，可以通过原型链机制去查找

//onclick 是DOM0级事件绑定
//addEventListener是DOM2级事件绑定

 

二、事件对象及兼容处理

<div id="div1"></div>

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

我们是把匿名函数定义的部分当做一个值赋值给oDiv的点击行为（函数表达式）

当我们触发#div1的点击行为的时候，会执行对应绑定的方法

重要：不仅仅把绑定的方法执行了，而且浏览器还默认的给这个方法传递了一个参数值，叫做MouseEvent，叫做鼠标事件对象，是一个对象属性类型的值。

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

clientX 和 clientY 是鼠标触发的，离屏幕的x和y轴的距离

2）MouseEvent，往上找是UIEvent，然后是Event，最后是Object，这是它的原型链

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

oDiv.onclick = function() {
    console.dir(arguments);
};

document.body.onclick = function(e) {
    console.dir(e);  //MouseEvent
};

2、关于事件对象MouseEvent的兼容问题 

传进来这个e，在iE9以上才有

在IE6，7，8时，e是不会传进去的 

window.event谷歌下也有，IE6，7，8下也有，但是火狐下没有window.event

所以IE6，7，8下只能用window.event

而IE9，谷歌，火狐等标准浏览器，e都是可以用的

oDiv.onclick = function (e) {

      console.dir(e);

      //->IE6，7，8下是存在window.event里面的

      console.dir(window.event);

}

1）事件对象本身的获取存在兼容问题

标准浏览器中是浏览器给方法传递的参数，

我们只需要定义形参e就可以获取到。

而IE6~8中浏览器不会给方法传递参数e，我们如果需要的话，

在IE6，7，8下只能用window.event中获取查找

 

//->处理兼容的办法

oDiv.onclick = function (e) {

//如果左边为false, 就走右边的值
//在IE6,7,8下，不会传递参数e, 那么e就没有，就是undefined
//走的就是右边
e = e || window.event;

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

//e.type : 存储的是当前鼠标触发的行为类型 比如"click"

//e.target: 它叫事件源，当前鼠标触发的是哪一个元素，那么它存储的就是哪一个元素

//e.pageX / e.pageY : 当前鼠标触发点距离body左上角(页面第一屏幕最左上端)的x/y轴的坐标

//e.preventDefault: 阻止浏览器的默认行为
//什么叫默认行为？
//e.preventDefault在IE6,7,8下没有这个方法，需要用e.returnValue=false;来代替
//这样写：
e.preventDefault ? e.preventDefault() : e.returnValue = false;

//第二种写法：
//return false;

//第三种写法：
// <a href="javascript:;"></a>
// 或者
// <a href="javascript:void 0;"></a>


//->e.stopPropagation:阻止事件的冒泡传播,在IE6,7,8中不兼容
//在IE6,7,8中使用e.cancelBubble = true;来代替
// e.stopPropagation();

//这样写：
e.stopPropagation ? e.stopPropagation() : e.cancelBubble = true;

};

 

document.body.onclick = function (e) {
    e = e || window.event;
    //事件源，在IE6,7,8下也有问题， e.target 在IE6,7,8下是 undefined
    //在IE6,7,8下不是用e.target来获取事件源的，只能用e.srcElement
    //在IE6,7,8下只能用e.srcElement来获取事件源

    //如果e.target存在，就用这个值，否则就用e.srcElement
    e.target = e.target || e.srcElement;
    console.log(e.target);


    //e.clientY 在IE6,7,8下存在，而e.pageY 在IE6,7,8下不存在，是undefined
    //在IE6,7,8中，没有e.pageY 这个属性
    //在IE6,7,8中，我们通过使用clientY + 滚动条卷去的高度来获取页面
    console.log(e.clientY); //287, 是距离当前屏的左上角
    console.log(e.pageY); //1087, 是距离第一屏最左上角

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

};

 

3、关于键盘事件

<input type="text" id="input1">

var input1 = document.getElementById("input1");
//键盘按下抬起事件
input1.onkeyup = function (e) {
    e = e || window.event;
    //e不一定是MouseEvent,还有可能是KeyboardEvent(键盘事件)
    console.log(e); //KeyboardEvent (键盘事件)

    //有哪些键盘事件：
    //->e.keyCode:当前键盘上每一个按键对应的值
    //几个常用的：空格(32) , 回退按键(BackSpace)->8, 回车按键(Enter)为13
    //删除按键(Del)为46, 四个方向键:左(37) , 上(38), 右(39), 下(40)
    console.log(e.keyCode);
};

document.body.onkeyup = function (e) {
    e = e || window.event;
    console.log(e.keyCode);
};