js的事件对象相关信息

持续创作，加速成长！这是我参与「掘金日新计划 · 10 月更文挑战」的第25天，点击查看活动详情

今天呢，对以前的一些笔记进行了整理。都是一些简单的笔记。尤其对于一些小白来说会比较友好。

事件对象概述：

事件对象是用来记录一些事件发生时的相关信息，事件对象是作为参数传给处理程序函数的（不支持ie8之前的版本，ie8之前的版本需通过event全局变量的到）

事件对象创建：

标准方式：系统自动创建

Chrome支持e和window.event写法

Firefox只支持e标准写法

Ie9/10两种写法都支持

兼容ie6/7/8方式，只支持window.event写法

事件对象兼容性写法：e=e || window.event;  //e作为函数参数，自动生成的事件对象

当前事件对象常见的属性

1. e●target返回触发当前事件的对象，和this得到的对象是一样的，但有特别情况下，会有区别。
2. e●type返回当前事件的名称     是事件名，返回值不带on
3. 获取当前事件发生时鼠标的坐标

• 1、e●screenX  鼠标指针的屏幕水平坐标
• 是相对于电脑屏幕的左上角00点进行计算，浏览器位置发生变化无影响
• 2、e●screenY    鼠标指针的屏幕垂直坐标
• 3、e●clientX   鼠标指针的相对于浏览器视口的水平距离  浏览器视口的00点
• 4、e●clientY  鼠标指针相对于浏览器视口的垂直坐标
• 5、e●offsetX  相对于当前对象的水平坐标
• 6、e●offsetX  相对于当前对象的垂直坐标

注意：要在对象区域内做以上这些事情，否则无效

• 7、shiftkey  键盘shift返回true
• 8、ctrlkey   键盘ctrl返回true
• 9、altkey    键盘alt返回true

阻止事件对象的方法：

1、e●preventDefault() 标准写法 阻止对象的默认动作

因为是点击的时候才跳转，所以先绑定点击事件，然后再阻止

说明：IE兼容写法returnValue属性=false

  If(event.preventDefalut){
        event.preventDefalut();
   }else{
       event.returnValue=false;
}

2、StopPropagation（）标准写法，阻止（事件）冒泡

说明：IE兼容写法cancelBubble属性=true