事件对象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 鼠标点击的坐标距窗口可视区垂直方向元素的距离