事件

简述事件

• 事件起始于IE3，作为一种分担服务器运算负载的一种手段。使用于键盘、鼠标等工具对于网页的交互！事件对于不同浏览器来说，有不同的标准，尤其是IE、Chrome两大巨头浏览器上，尽管现如今Chrome已经占据大部分市场，但是对于IE8及以上的兼容也是个不小的问题。

事件类型

• UI事件：使用户与页面上的元素交互时触发；
• 焦点事件：当元素获取失去焦点是触发；
• 鼠标事件：当鼠标执行点击、移入移出或者悬停等事件是触发；
• 滚轮事件：当鼠标、触摸板或者其余设施滚动时触发滚动条事件；
• 文本事件：在文本框内输入文字时触发；
• 键盘事件：当键盘按下、抬起或者点击时触发；
• 变动事件：当问文档结构发生变化时触发。

UI事件

• load事件
• 当页面完全加载后再window上面触发，当所有框架都加载完成时，在框架集上面触发，当图片都加载完成时在img标签上面触发，或者者当嵌入的内容加载完成时在object上触发。
• unload事件
• 和load事件刚好相反，除img标签外，其余的框架和嵌入内容卸载完毕后在对应的级别上触发。
• abort事件
• 在使用户中止下载过程时，假如嵌入的内容没有加载完毕，在object元素上线触发。
• error事件
• 当js发生语法错误时在window上触发，当发生加载图像无法成功时在img标签上触发，当嵌入的内容无法加载时在object元素上触发，或者当一个或者多个框架无法加载完成时在框架集上面触发。
• select事件
• 当使用户选择文本框内的文字时触发（input或者textarea）。
• resize事件
• 当窗口或者者框架的大小变化时在window或者框架上面触发。
• scroll事件
• 当使用户滚动带有滚动条的元素中的内容时，在该元素上面触发。body上就是网页自带的滚动条。

对于文档嵌入内容不是很清楚的同学可以去看一下HTML5权威指南的第15章节内容。

焦点事件

• blur事件、focusout
• 输入框失去焦点事件，css有相同伪类选择器，但是不够灵活！
• focusin事件、focus
• 输入框获取焦点是触发，同样，css有相同的伪类事件。输入框假如用 click同样能获取焦点，但是有点牛头马嘴的意思。
• focus和blur事件不支持冒泡，假如不想文档事件冒泡则用这两个事件更好，不使用屏蔽事件流。

鼠标与滚轮事件

• mousedown、mouseup事件
• 鼠标左键按下、抬起事件，相继触发这两个事件后还会触发click事件。
• click事件、dbclick事件
• 鼠标单击、双击事件
• mouseleave、mouseout事件
• 都是鼠标脱离当前区域触发，不同的是mouseleave不冒泡。
• mouseenter、mouseover事件
• 鼠标进入、悬停在当前区域时触发，mouseenter事件不冒泡。
• mousemove事件
• 当鼠标在当前区域移动时重复触发！
• mousewheel事件
• 滚轮事件在鼠标中间滚动时触发，同时包含一个wheelData属性，它是120的整数倍数，滚轮向上滚动一个单位时wheelDate+120，向下滚动时-120,。

键盘与文本事件

• keydown：当使用户按下键盘等按键设施上的按钮时触发，按住不放会重复触发。
• keyup、keypress：按键按下后释放时触发。两个事件都是同时触发keyCode的值，但是keypress会输出input框的上一个值，而keyup会立即输出当前input的值。如下：

• 1
• 2
• 3
• 4
• 5
• 6
• 7
• 8
• 9
• 10

在我依次按下数字键1、2、3、4、5、6时控制台是如下效果：

index.html:15 49

index.html:16

index.html:15 50

index.html:16 1

index.html:15 51

index.html:16 12

index.html:15 52

index.html:16 123

index.html:15 53

index.html:16 1234

index.html:15 54

index.html:16 12345

• 1
• 2
• 3
• 4
• 5
• 6
• 7
• 8
• 9
• 10
• 11
• 12
• 13

但是假如是keyup的事件呢：

• 1
• 2
• 3
• 4
• 5
• 6
• 7
• 8
• 9
• 10

在我依次按下数字键1、2、3、4、5、6时控制台是如下效果：

index.html:15 49

index.html:16 1

index.html:15 50

index.html:16 12

index.html:15 51

index.html:16 123

index.html:15 52

index.html:16 1234

index.html:15 53

index.html:16 12345

index.html:15 54

index.html:16 123456

• 1
• 2
• 3
• 4
• 5
• 6
• 7
• 8
• 9
• 10
• 11
• 12

事件流

• 事件流形容的是事件在网页文档中的接收顺序，它形容着事件发生时，事件是顺着文档流向上还是向下！
• 但是奇趣的是，IE和Netscape开发团队提出了两个完全相反的事件流概念！那就是事件冒泡和事件捕获！

根据网页文档的DOM级别规定层级结构：

文档结构documenthtmlbodyelement

事件冒泡

假定事件在element上触发，而后事件会跟着下图一次冒泡

graph LR

Element–>body

body–>html

html–>document

• 1
• 2
• 3
• 4

事件是默认冒泡的，在IE9，Opera9.5及其余浏览器各版本及更高版本都是支持事件流的，但是上述明确浏览器的更低版本则不支持。