事件对象event及其相关属性

目录

一、什么是事件对象

二、事件对象的属性

2.1  事件对象的兼容性

2.2  事件对象的type属性

2.3  target 与currentTarget

2.4  事件对象的keyCode属性

2.5  ctrlKey 、altKey、 shiftKey

2.6  screenX与screenY

2.7  offsetX 与offsetY

2.8  clientX与clientY

---

一、什么是事件对象

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

二、事件对象的属性

2.1  事件对象的兼容性

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

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

 

2.2  事件对象的type属性

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

2.3  target 与currentTarget

1、target: 是触发事件的对象，通俗一点说： 在屏幕哪点击的就会触发当前点击的对象，
2、currentTarget是绑定事件的对象，也可将currentTarget当作this
（只是在绑定事件中可以将其当作this，因为this代表的意思有好多种）

2.4  事件对象的keyCode属性

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

2.5  ctrlKey 、altKey、 shiftKey

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

2.6  screenX与screenY

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

2.7  offsetX 与offsetY

1、offsetX 鼠标点击的坐标距自身水平方向元素的距离，不受滚动条影响
2、offsetY 鼠标点击的坐标距自身垂直方向元素的距离， 不受滚动条影响

2.8  clientX与clientY

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