JS初级事件对象的方法

50 阅读2分钟

携手创作,共同成长!这是我参与「掘金日新计划 · 8 月更文挑战」的第20天juejin.cn/post/712312…

事件对象概述:事件对象是用来记录一些事件发生时的相关信息,事件对象是作为参数传给处理程序函数的(不支持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

获取当前事件发生时鼠标的坐标

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