3.事件对象

定义

记录了事件发生时关于事件的一些详细信息，这些信息都被保存在一个对象当中

使用和兼容性问题

IE
event对象是window身上的对象，可以直接使用

element.onclick=function(){
    console.log(event);    //这里的event就是事件对象
};

FireFox
FireFox中事件对象是事件处理函数内的第一个参数

element.onclick=function(ev){
    console.log(ev);    //这里的ev就是事件对象
};

chrome
上面两种方法均支持

事件对象中的常用属性

鼠标坐标 clientX clientY

事件发生时鼠标的位置信息
坐标是根据可视区左上角进行计算的
event.clientX
event.clientY

<!--div跟随鼠标移动实例-->
<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title></title>
        <style>
            div{
                width: 100px;
                height: 100px;
                background: red;
                position: absolute;
                left: 0;
                top: 0;
            }
        </style>
    </head>
    <body>
        <div></div>
    </body>
    <script>
        var div = document.querySelector('div');
        document.onmousemove=function(ev){
            div.style.left=ev.clientX+'px';
            div.style.top=ev.clientY+'px';          
        };
    </script>
</html>

按键信息 keyCode

按下哪个键，返回这个键对应的Unicode编码

document.onkeydown=function(ev){
    console.log(ev.keyCode);    //如果按下enter，返回数字13
};

功能键判断 ctrlKey shiftKey altKey

判断对应的功能键是否被按下，返回值为布尔值

document.onkeydown=function(ev){
    console.log(ev.ctrlKey);    //如果这里按下了ctrl键，那么会在控制台输出true，按下其他键，输出false
};

注意：

其实鼠标事件的事件对象里，也是存在按键信息的

document.onclick=function(ev){
    console.log(ev.keyCode);
};

上面的代码是一个点击事件，当我点击的时候，按键，还是会在控制台输出按键对应的Unicode编码