事件对象event及其相关属性

一、什么是事件对象

1、event是事件对象,是关于事件的一系列的集合,写在事件函数的小括号里面,习惯写e
2、只有有了事件(单击事件、 鼠标事件、 键盘事件)之后才会有事件对象,即事件对象发生在事件之后,或者说没有事件绑定就没有事件对象
3、事件对象是系统自动创建的,我们只需接收就好

在这里插入图片描述

二、事件对象的属性

1、事件对象的兼容性

不同的浏览器对于事件对象的创建有不同
1、 在高级浏览器中,使用的event,习惯写e
2、 在低级浏览器IE6-IE8中,使用的window.event
3、兼容性的写法是

元素.on+事件类型 = function(e){  
	e = e || window.event
}

在这里插入图片描述

2、事件对象的type属性

type 返回要触发的事件类型,但是注意事件类型不加 on
比如 : click mouseover …

在这里插入图片描述

3、target 与currentTarget

1、target: 是触发事件的对象,通俗一点说: 在屏幕哪点击的就会触发当前点击的对象,
2、currentTarget是绑定事件的对象,也可将currentTarget当作this
(只是在绑定事件中可以将其当作this,因为this代表的意思有好多种)
注: IE6-8 是用srcElement来代表触发事件的对象
兼容写法 target = e.target || e.srcElement

在这里插入图片描述

4、 事件对象的keyCode属性

1、keyCode 返回被按下键盘的键码(ASCII码),keyCode只能结合keypress事件使用,使用键盘时给 document 绑定事件
2、keypress事件有
: keydown (键盘按下)
: keyup (键盘释放)
: keypress (键盘被按下)
3、keydown 与keypress的区别
keypress不识别功能键,比如 : ctrl、shift、alt…, 且keypress区分大小写,
keydown识别功能键,不区分大小写

在这里插入图片描述

5、ctrlKey 、altKey、 shiftKey

1、ctrlKey: 判断是否按下了ctrl键, 返回 boolean 类型 ,默认是 false
2、altKey: 判断是否按下alt键, 返回 boolean 类型 ,默认是 false
3、shiftKey: 判断是否按下shiftKey键, 返回 boolean 类型 ,默认是 false

在这里插入图片描述

6、screenX与screenY

1、screenX 鼠标点击的坐标距电脑屏幕水平方向的距离
1、screenY 鼠标点击的坐标距电脑屏幕垂直方向的距离

在这里插入图片描述

7、offsetX 与offsetY

1、offsetX 鼠标点击的坐标距自身水平方向元素的距离,不受滚动条影响
2、offsetY 鼠标点击的坐标距自身垂直方向元素的距离, 不受滚动条影响
在这里插入图片描述

8、clientX与clientY

1、clientX 鼠标点击的坐标距窗口可视区水平方向元素的距离
2、clientY 鼠标点击的坐标距窗口可视区垂直方向元素的距离

在这里插入图片描述

发布了12 篇原创文章 · 获赞 27 · 访问量 791

猜你喜欢

转载自blog.csdn.net/qq_36091461/article/details/105238502
今日推荐