Javascript事件全解析——事件概述及传统事件类型

一、关于事件的一些定义

1.      事件类型：一个用来说明发生什么类型事件的字符串。比如keydown表示键盘某个键按下

2.      事件目标：发生的事件或与之相关的对象，如Window/Document/Element

3.      事件处理程序：处理或响应事件的函数

4.      事件对象:与特定事件相关且包含有关该事件详细信息的对象（如：鼠标事件的相关对象会包含鼠标指针的坐标）

5.      事件传播：冒泡、排序

 

 

二、事件的分类

1.      依赖于设备的输入事件：mousedown/mouseover/keydown等

2.      独立于设备的输入事件：click（指激活了链接、按钮或其他文档元素，可用鼠标也可用键盘回车键等）

3.      用户界面事件：change/focuse/submit(用户点击表单中提交后触发)

4.      状态变化事件：load/readystatechange

5.      特定API事件：HTML5中定义的包括dragstart/dragenter以及<video><audio>相关事件

6.      计算器和错误处理程序

 

三、传统事件类型

1.表单事件

当提交和重置表单时，<form>元素会分别出发submit和reset事件

当用户和类按钮表单元素交互时，它们会发生click事件

用户通过输入文字、选择选项或选择复选框来改变相应表单元素状态时，这些元素会发生change事件（对于文本域只有用户和表单完成交互并通过Tab键或单击方式移动焦点时才会触发）

表单某元素得到或失去焦点时出发focus和blur事件

2.Window事件

Window事件指：事件的发生于浏览器窗口本身而非窗口中显示的任何特定文档内容相关

load事件：当文档和其所有外部资源完全加载并显示给用户时就会出发它

unload事件：当用户离开当前文档转向其他文档时会触发它

onerror事件：当Javascript出错时会触发

用户调整浏览器窗口大小或滚动它时会触发resize和scroll事件

3.鼠标事件

鼠标事件在鼠标指针所对应的最深嵌套元素上出发，但它们会冒泡直到文档最顶层

clientX和clientY属性指定了鼠标在窗口坐标中的位置

button和which属性指定了按下的鼠标键是哪个

当键盘辅助键按下时，对应的属性altKey/ctrlKey/metaKey和shifKey会设置为true

对于click事件，detail属性指定了其是单击、双击还是三击

其他鼠标事件的出发：

mousemove事件：用户每次移动或拖动鼠标时触发 （发生很频繁）

用户鼠标左键一次操作可能发生的事件执行的事件过程：

mousedown -> mouseup -> click -> dbclick

右键鼠标会出发contextmenu事件(浏览器弹出菜单)，可以取消该事件来组织默认的弹出菜单操作

4.键盘事件

包括keydown / keyup / keypress等，原理与鼠标事件类似。