JavaScript之事件类型

事件类型

Web浏览器中可能发生的事件有很多类型。DOM3事件规定了以下几类事件：

1. UI事件，当用户与页面上的元素交互时触发；
2. 焦点事件，当元素获得或失去焦点的时触发；
3. 鼠标事件，当用户通过鼠标在页面上执行操作时触发；
4. 滚轮事件，当用户通过鼠标滚轮或类似设备时触发；
5. 文本事件，当在文档中输入文本时触发；
6. 键盘事件，当用户通过键盘在页面执行操作时触发；
7. 合成事件，当为IME（input method editor 输入法编辑器）输入字符时触发；
8. 变动（mutation）事件，当底层DOM结构发生变化时触发；
9. 变动名称事件，当元素或者属性名变动时触发。此类事件已经被废弃。

1. UI事件

UI事件指的是那些不一定与用户操作有关的事件。现有的UI事件如下:

• DOMActivate：表示元素已经被用户操作激活（DOM3中已经废弃）；
• load：当页面完全加载后在window上触发，当所有框架都加载完毕后在框架集上触发，图片加载完在img标签上触发，或者嵌入的内容加载完在object元素上面触发；
• unload：当页面完全卸载后在window上触发，当所有框架都卸载后在框架集上触发，或者嵌入的内容卸载后在object元素上面触发；
• abort：在用户停止下载过程时，如果嵌入的内容没有加载完，则在object元素上面触发；
• error：当发生JavaScript错误时在window上面触发，当无法加载图像时在img标签上触发，无法加载嵌入内容时在< object>上触发，或者当一个或者多个框架无法加载时在框架集上触发；
• select：当用户选择文本框（< input> or < texterea>）中的一个或者多个字符时触发；
• resize：当窗口或者框架的大小变化时在window或框架上面触发；
• scroll：当用户滚动带滚动条的元素中的内容时，在该元素上面出发。< body>元素中包含所加载页面的滚动条。

2. 焦点事件

焦点事件会在页面元素获得或失去焦点时触发。利用这些事件并于document.hasFocus()方法及document.activeElement属性配合，可以知晓用户在页面上的行踪。

• focus：在元素获得焦点时触发。这个事件不会冒泡，所有浏览器都支持
• blur：在元素失去焦点时触发。这个事件不会冒泡，所有的浏览器都支持；
• DOMFocusIn：在元素获得焦点时触发。这个事件与HTML事件focus等价，但它冒泡。（DOM3废弃，改用focusin）仅opera支持
• DOMFocusOut: 在元素失去焦点时触发。这个事件是HTML事件blur的通用版本。（DOM3废弃，选择focusout）仅opera支持
• focusin：focus冒泡版
• focusout：blur冒泡版

当焦点从页面的一个元素移动到另一个元素会依次触发以下事件：

1. focusout：在失去焦点的元素上触发；
2. focusin：在获得焦点的元素上触发；
3. blur：在失去焦点的元素上触发；
4. DOMFocusOut：在失去焦点的元素上触发；
5. focus：在获得焦点的元素上触发；
6. DOMFocusIn：在获得焦点得元素上触发。

3. 鼠标和滚轮事件

鼠标事件是web开发中最常用的一类事件，毕竟鼠标还是最主要的定位设备。DOM3级中定义了9种鼠标事件：

• click：用户单机鼠标（一般是左边的按钮）或者按下回车键时候触发。
• dbclick：在用户双击主鼠标按钮（一般是左）时触发。
• mousedown：在用户按下了任意鼠标时触发，不能通过键盘触发这个事件。
• mouseenter：在鼠标光标从元素外部首次移动到元素范围之内时触发，这个事件不冒泡，而且在光标移动到后代元素不会触发。
• mouseleave：在位于元素上方的鼠标光标移动到元素范围之外时触发，这个事件不冒泡，对应mouseenter。
• mousemove：当鼠标指针在元素内部移动时重复地触发。不能通过键盘触发。
• mouseout：在鼠标指针位于一个元素上方，然后用户将其移入到另一个元素时候触发。新元素可能在旧元素的外部也有可能是旧元素的子元素。
• mouseover：在鼠标指针位于一个元素的外部，然后用户将其首次移入到一个元素的边界之内触发。
• mouseup：用户释放鼠标按钮时触发。不能通过键盘触发这个事件。

4. 键盘和文本事件

DOM3级有三个键盘事件：

• keydown：当用户按下键盘上的任意键时触发，而且如果按住不放的话，会重复触发此事件。
• keypress：当用户按下键盘上的字符键时触发，而且如果按住不放的话，会重复触发此事件。
• keyup：当用户释放键盘上的键时触发。

一个文本事件：

• textInput：可以用开替代keypress，当用户再可编辑区域输入字符时触发该事件。与keypress不同的是，该事件只会在用户输入可视字符时触发，而keypres事件则只要按下键即触发(如CapsLock，Backspace)。

5. 复合事件

复合事件（composition event）是DOM3级事件中新增的一类事件，用于处理IME的输入序列。IME（input method editor， 输入法编辑器）可以让用户输入在物理键盘上找不到的字符。

6. 变动事件

暂时不想写

7. HTML5事件

1. contextmenu事件
   右键调出上下文菜单
2. beforeunload事件
   在浏览器卸载页面之前触发，主要是为了让开发人员有可能在页面卸载前阻止这一操作。
3. DOMContentLoaded事件
   DOMContentLoaded事件会在形成完整的DOM树之后就会触发，不会理会图像，JavaScript文件，css文件或者其他资源是否加载完成。与load事件的区别在于load事件会在页面加载完所有资源后触发。
4. readystatechange事件
   readystatechange有五种状态：
   uninitialized（未初始化） ，loading（正在加载），loaded（加载完毕），interactive（交互），complete（完成）
5. hashchange事件：
   HTML5新增了hashchange事件，以便于在URL参数列表发生变化时通知开发人员。