一起养成写作习惯！这是我参与「掘金日新计划 · 4 月更文挑战」的第14天，点击查看活动详情。

事件对象

什么是事件对象？

event就是一个事件对象写到我们侦听函数的小括号里面，可以当形参来看
事件对象只有有了事件才会存在,它是系统给我们自动创建的，不需要我们传递参数
事件对象是我们事件的一系列相关数据的集合跟事件相关的比如鼠标点击里面就包含了鼠标的相关信息：鼠标坐标之类的。如果是键盘事件里面就包含了键盘的事件信息，比如判断用户按下了哪个键
这个事件对象我们可以自己命名，一般是event、evt或者更简单的e
事件对象也有兼容性问题 ie678只能通过window.event 那么兼容性写法是 e = e || window.event一般不太考虑兼容性问题了，实际开发直接写event就好了

例如:

        //事件对象
        var div = document.querySelector('div');
        div.onclick = function (event) {
            console.log(event);
            console.log(window.event); //ie678的用这句
            event = event || window.event; //兼容性写法
            console.log(event);
        } //以前我们注册完事件后绑定事件的function中的()是没有参数的，其实里面可以有一个参数event

        div.addEventListener('click', function (e) {
            console.log(e);
        })

总结：
事件对象是写在函数小括号里面当形参来看的，它是与事件相关的，必须有了事件才会有事件对象。官方解释：event对象代表事件的状态，比如键盘按键状态、鼠标的位置、鼠标按钮的状态。简单理解：事件发生后，跟事件相关的一系列信息数据的集合都放到这个对象里面，这个对象就是事件对象event，它有很多属性和方法。

常见事件对象的属性和方法

e.target返回触发事件对象

e.target返回的是触发事件的对象(元素) 、this返回的是绑定事件的对象(元素)

        var div = document.querySelector('div');
        var ul = document.querySelector('ul');
        
        div.addEventListener('click', function (e) {
            console.log(e.target);// <div></div>
            console.log(this);// <div></div>
        })
        
        ul.addEventListener('click', function (e) {
            console.log(this); //因为是ul绑定的事件，所以this返回的是ul
            console.log(e.target); //触发的对象是li，返回的是li
            console.log(e.currentTarget); //与this相似
        })

同样的，e.target是标准的，但也有兼容性问题，ie678不认识它，ie678只认识e.srcElement,这个方法和e.target是一样的，返回的是触发事件的对象。所以我们了解一下下面的兼容性写法，因为ie678不认识监听事件方法，所以我们只能采取传统方式进行注册事件

        div.onclick = function (e) {
             e = e || window.event;
             var target = e.target || e.srcElement;
             console.log(target);
         }

还有一个与this非常相似的属性 currentTarget，也是返回触发事件的对象,了解即可同样也有兼容性问题，ie678不认识。

e.type返回事件类型

        var div = document.querySelector('div');
        div.addEventListener('click', fn);
        div.addEventListener('mouseover', fn);
        div.addEventListener('mouseout', fn);

        function fn(e) {
            console.log(e.type);
        }

当鼠标经过div盒子、点击、和离开div盒子，都触发了事件，并返回了事件类型

e.preventDefault()阻止对象默认行为

比如阻止链接跳转，阻止提交到表单

        var a = document.querySelector('a');
        // (1)方法监听注册方式
        a.addEventListener('click', function (e) {
            e.preventDefault(); //该方法阻止默认事件(行为) 是标准方法
        })

            // (2)传统的注册方式
            a.onclick = function (e) {
            return false; 
            alert('1');
        }

e.preventDefault() 适用于普通浏览器阻止默认行为的标准方法。
e.returnValue适用于低版本 ie678 阻止默认行为的属性。
或者直接使用return false 也能阻止默认行为，没有兼容性问题。
如上面代码，return false虽然不错，但是return后面如果有代码就执行不了啦.并且return false阻止默认行为只适用于传统的注册方式。

常见的鼠标事件

1.禁止鼠标右键菜单
contextmenu主要控制应该何时显示上下文菜单，主要用于程序员取消默认的上下文菜单

        document.addEventListener('contextmenu', function (e) {
            //再利用事件对象阻止默认行为
            e.preventDefault();
        });

2.禁止鼠标选中(selectstart 开始选中)

    document.addEventListener('selectstart', function (e) {
            //再利用事件对象阻止默认行为
            e.preventDefault();
        });

以及其他的点击事件click、双击事件dbclick、鼠标按下mousedown、鼠标抬起mouseup、鼠标移动mousemove、滚轮滑动wheel、鼠标移入移出mouseenter/mouseleave、鼠标经过离开mouseover/mouseout等

mouseover事件和mouseenter事件，都是鼠标进入一个节点时触发。两者的区别是，mouseenter事件只触发一次，而只要鼠标在节点内部移动，mouseover事件会在子节点上触发多次。

鼠标事件对象

如果你的事件是鼠标触发的，那么你的事件对象也是鼠标事件对象
可以试着在触发的事件处理函数中输出事件对象，查看自带的属性

鼠标事件对象常见的属性：
e.clientX : 返回鼠标相对于浏览器窗口可视区的X坐标
e.clientY : 返回鼠标相对于浏览器窗口可视区的Y坐标
e.pageX : 返回鼠标相对于文档页面的X坐标，IE9以上支持
e.pageY : 返回鼠标相对于文档页面的Y坐标，IE9以上支持
e.screenX : 返回鼠标相对于电脑屏幕的X坐标
e.screenY : 返回鼠标相对于电脑屏幕的Y坐标

示例

        document.addEventListener('click', function (e) {
            // console.log(e); //得到MouseEvent 里面很多属性
            
            // 1.client 鼠标在浏览器可视区的坐标
            console.log(e.clientX);
            console.log(e.clientY); 
            //不管你的body高是几千px也好，我都是相对于我当前浏览器可是窗口来返回坐标的

            // 2.鼠标在文档的坐标
            console.log(e.pageX);
            console.log(e.pageY);

            // 3.鼠标距离屏幕的坐标
            console.log(e.screenX);
            console.log(e.screenY);
        })

常见的键盘事件

常用的键盘事件
onkeyup : 某个键盘按键被松开时触发
onkeydown : 某个键盘按键被按下时触发
onkeypress : 某个键盘按键被按下时触发(但是它不识别功能键，比如ctrl和shift箭头等等)

        // 1.onkeyup键盘弹起时触发
        document.onkeyup = function () { //传统方式注册
            console.log('我弹起了！--onkeyup');
        }
       

        // 2.onkeydown键盘按下触发
        document.onkeydown = function () { //传统方式注册
            console.log('我按下了！--onkeydown');
        }

        // 3.onkeypress 按下时触发
        document.onkeypress = function () { //传统方式注册
            console.log('我按下了！--onkeypress'); //onkeypress不识别功能键
        }

注意：
三个事件的执行顺序，先是keydown 然后是keypress 最后是keyup

键盘事件对象

同理，如果事件是由键盘触发的，那么事件对象就是键盘事件对象
介绍一些常用的
键盘事件对象中的keyCode属性可以得到相应键的ASCII码值
注意：

keyup 和 keydown事件不区分字母大小写 a 和 A都是65
keypress事件不区分字母大小写 a 和 A得到的都是65
e.KeyCode

        document.addEventListener('keyup', function (e) {
            // console.log(e); //输出KeyboardEvent，里面有很多属性
            console.log('up' + e.keyCode);
            //可以利用KeyCode返回的ASCII码值来判断用户 比如
            if (e.keyCode === 65) {
                alert('您按下了a');
            } else {
                alert('您没有按下a');
            }
        })
        document.addEventListener('keypress', function (e) {
            console.log('press' + e.keyCode);
        })

DOM事件对象