事件对象及兼容处理

一、什么是事件？

//1.什么是事件？
//->事件分为两部分：
//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>

<script>
  
    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));

    };

</script>

三、键盘事件

<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);
};