事件类型

鼠标事件

事件	描述
click	左键单击
contextmenu	右键单击
dblclick	双击
mousedown	左键按下
mouseup	左键弹起
mouseover	鼠标放上去（在子元素上也会触发）
mouseout	鼠标离开
mouseenter	鼠标放上去
mouseleave	鼠标离开
mousemove	鼠标移动事件
mousewheel	鼠标滚轮事件

注意：鼠标滚轮事件有兼容性问题，在IE、Chrom中是mousewheel，在FireFox中是DOMMouseScroll，且在FirFox中不能使用on来绑定。在IE和Chrom中向上滚动，事件对象中的wheelDelta是120，向下滚动是-120，在FirFox中向上滚动，事件对象中的e.detail是3，向下滚动是-3。

 

浏览器事件

事件	描述
load	加载
scroll	滚动
resize	大小改变

 

键盘事件

事件	描述
keydown	按下
keyup	弹起
keypress	敲打

键盘事件除了用window可以触发之外，还可以使用document，或者表单元素。总之是可以选中的元素。例如div就不行。

 

表单事件

 

事件	描述
submit	提交表单
focus	获取焦点
blur	失去焦点
change	内容改变并失去焦点
input	input的value值改变

使用说明：input事件在低版本的IE中不兼容，使用onpropertychange代替。

 

事件流

每个事件发生的时候，都会有一个触发并执行的过程，也就是事件的传播过程，我们称之为事件流。

简单来说，事件流就是事件从发生到执行结束的流程。

事件流包含3个阶段：捕获阶段、目标阶段、冒泡阶段

事件捕获阶段：事件开始由顶层元素触发，然后逐级向下传播，直到目标元素，依次执行其身上绑定的事件。

事件目标阶段(处理阶段)：触发当前自身的事件。

事件冒泡阶段：事件由目标元素先接收，然后逐级向上传播，达到最顶层元素，依次执行其身上绑定的事件。

 

目标元素的事件是在目标阶段执行，其他事件会在冒泡阶段执行。每个事件只会执行一次，也就是说如果在冒泡阶段执行了事件，就不会在捕获阶段执行。事件执行的流程是先捕获阶段——》再目标元素阶段——》最后冒泡阶段。

例：

 

事件对象总结

在行内绑定的事件，在行内传入event，其他事件驱动函数在定义的时候传入自定义参数。在函数中通过获取参数或者window.event来得到事件对象。

名称	意义	使用方式	兼容问题
stopPropagation方法	阻止冒泡	e.propagation()	e.cancelBubble=true
preventDefault方法	阻止默认行为	e.preventDefault()	e.returnValue=false
clientX	鼠标点击坐标	e.clientX	无
offsetX	鼠标点击坐标	e.offsetX	无
pageX	鼠标点击坐标	e.pageX	无
target	精准的事件源	e.target	e.srcElement
keyCode	键盘码	e.keyCode	e.which
type	事件类型	e.type	无
button	鼠标按键信息	e.button	无