javaScript中的事件类型

 UI(User Interface，用户界面)事件，当用户与页面上的元素交互时触发；
UI 事件指的是那些不一定与用户操作有关的事件。这些事件在 DOM 规范出现之前，都是以这种或那种形式存在的，而在 DOM 规范中保留是为了向后兼容。现有的 UI 事件如下（都存在于window对象，可在body元素上监听，少部分也存在于其他元素）：

a、DOMActivate:表示元素已经被用户操作(通过鼠标或键盘)激活。这个事件在 DOM3 级事件中被废弃，但 Firefox 2+和 Chrome 支持它。考虑到不同浏览器实现的差异，不建议使用这个事件。
b、load:当页面完全加载后在 window 上面触发，当所有框架都加载完毕时在框架集上面触发，当图像加载完毕时在<img>元素上面触发，或者当嵌入的内容加载完毕时在<object>元素上面触发。
！！注意：
<script>元素和<link>元素在未添加到文档之前，不会开始下载，所以src属性和onload事件无所谓先后顺序，img元素不管在不在文档树中，只要指定了src属性就会开始下载
c、unload:当页面完全卸载后在 window 上面触发，当所有框架都卸载后在框架集上面触发，或者当嵌入的内容卸载完毕后在<object>元素上面触发。
d、abort:在用户停止下载过程时，如果嵌入的内容没有加载完，则在<object>元素上面触发。
e、error:当发生 JavaScript 错误时在 window 上面触发，当无法加载图像时在<img>元素上面触发，当无法加载嵌入内容时在<object>元素上面触发，或者当有一或多个框架无法加载时在框架集上面触发。
f、select:当用户选择文本框(<input>或<texterea>)中的一或多个字符时触发。
g、resize:当窗口或框架的大小变化时在 window 或框架上面触发。
h、scroll:当用户滚动带滚动条的元素中的内容时，在该元素上面触发。<body>元素中包含所加载页面的滚动条。
 焦点事件，当元素获得或失去焦点时触发;
a、blur:在元素失去焦点时触发。这个事件不会冒泡;所有浏览器都支持它。
b、DOMFocusIn:在元素获得焦点时触发。这个事件与 HTML 事件 focus 等价，但它冒泡。只有Opera 支持这个事件。DOM3 级事件废弃了 DOMFocusIn，选择了 focusin。
c、DOMFocusOut:在元素失去焦点时触发。这个事件是 HTML 事件 blur 的通用版本。只有 Opera支持这个事件。DOM3 级事件废弃了 DOMFocusOut，选择了 focusout。
d、focus:在元素获得焦点时触发。这个事件不会冒泡;所有浏览器都支持它。
e、focusin:在元素获得焦点时触发。这个事件与 HTML 事件 focus 等价，但它冒泡。支持这个事件的浏览器有 IE5.5+、Safari 5.1+、Opera 11.5+和 Chrome
f、focusout:在元素失去焦点时触发。这个事件是 HTML 事件 blur 的通用版本。支持这个事件的浏览器有 IE5.5+、Safari 5.1+、Opera 11.5+和 Chrome。
 鼠标事件，当用户通过鼠标在页面上执行操作时触发;
a、click:在用户单击主鼠标按钮(一般是左边的按钮)或者按下回车键时触发。这一点对确保易访问性很重要，意味着 onclick 事件处理程序既可以通过键盘也可以通过鼠标执行。
b、dblclick:在用户双击主鼠标按钮(一般是左边的按钮)时触发。从技术上说，这个事件并不是 DOM2 级事件规范中规定的，但鉴于它得到了广泛支持，所以 DOM3 级事件将其纳入了标准。
c、mousedown:在用户按下了任意鼠标按钮时触发。不能通过键盘触发这个事件。
d、mouseenter:在鼠标光标从元素外部首次移动到元素范围之内时触发。这个事件不冒泡，而且在光标移动到后代元素上不会触发。DOM2 级事件并没有定义这个事件，但 DOM3 级事件将它纳入了规范。IE、Firefox 9+和 Opera 支持这个事件。
e、mouseleave:在位于元素上方的鼠标光标移动到元素范围之外时触发。这个事件不冒泡，而且在光标移动到后代元素上不会触发。DOM2 级事件并没有定义这个事件，但 DOM3 级事件将它纳入了规范。IE、Firefox 9+和 Opera 支持这个事件。
f、mousemove:当鼠标指针在元素内部移动时重复地触发。不能通过键盘触发这个事件。
g、mouseout:在鼠标指针位于一个元素上方，然后用户将其移入另一个元素时触发。又移入的另 14一个元素可能位于前一个元素的外部，也可能是这个元素的子元素。不能通过键盘触发这个事件。
h、mouseover:在鼠标指针位于一个元素外部，然后用户将其首次移入另一个元素边界之内时触发。不能通过键盘触发这个事件。
I、mouseup:在用户释放鼠标按钮时触发。不能通过键盘触发这个事件。

！！注：clientX、clientY表示鼠标指针在浏览器视口区的水平和垂直坐标，因为不包括页面滚动位置，所以不表示页面位置；
pageX和pageY表示页面坐标；
screenX和screenY表示鼠标指针相对整个屏幕的位置；
event的四个属性表示修改键的状态：shiftKey、ctrlKey、altKey 和 metaKey。这些属性中包含的都是布尔值，如果相应的键被按下了，则值为 true，否则值为 false。
mouseover和mouseout事件会涉及相关元素，用evemt对象的relatedTarget属性表示；
 滚轮事件，当使用鼠标滚轮(或类似设备)时触发;
a、mousewheel：当用户通过鼠标滚轮与页面交互、在垂直方向上滚动页面时(无论向上还是向下)，就会触发 mousewheel事件。这个事件可以在任何元素上面触发，最终会冒泡到 document(IE8)或 window(IE9、Opera、Chrome 及 Safari)对象。
event对象包含一个特殊的属性：wheelData
 文本事件，当在文档中输入文本时触发;
a、textInput：在文本插入文本框之前会触发 textInput事件，用意是在将文本显示给用户之前更容易拦截文本。
event对象包含一个data属性，是用户输入的字符
 键盘事件，当用户通过键盘在页面上执行操作时触发;
a、keydown:当用户按下键盘上的任意键时触发，而且如果按住不放的话，会重复触发此事件。
b、keypress:当用户按下键盘上的字符键时触发，而且如果按住不放的话，会重复触发此事件。按下 Esc 键也会触发这个事件。
c、keyup:当用户释放键盘上的键时触发。

在发生 keydown 和 keyup 事件时，event 对象的 keyCode 属性中会包含一个代码，与键盘上一个特定的键对应。对数字字母字符键，keyCode 属性的值与 ASCII 码中对应小写字母或数字的编码相同。
发生keypress事件时，event 对象都支持一个 charCode 属性，这个值是按下的那个键所代表字符的 ASCII 编码。
```
<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <title>Example</title>
</head>

<body>
    <input type="text" id="test">
    <script>
        var element = document.getElementById('test')

        element.onkeypress = function(e) {
            console.log('keypress',String.fromCharCode(e.charCode))
        }

        element.onkeydown = function(e) {
            console.log('keydown',String.fromCharCode(e.keyCode))
        }

        element.onkeyup = function(e) {
            console.log('keyup',String.fromCharCode(e.keyCode))
        }
    </script>
</body>

</html>
```
 合成事件，当为 IME(Input Method Editor，输入法编辑器)输入字符时触发;
a、compositionstart:在 IME 的文本复合系统打开时触发，表示要开始输入了。
b、compositionupdate:在向输入字段中插入新字符时触发。
c、compositionend:在 IME 的文本复合系统关闭时触发，表示返回正常键盘输入状态。
 变动(mutation)事件，当底层 DOM 结构发生变化时触发。
a、DOMNodeRemoved:在节点从其父节点中被移除时触发。
b、DOMNodeRemovedFromDocument:在一个节点被直接从文档中移除或通过子树间接从文档中移除之前触发。这个事件在 DOMNodeRemoved 之后触发。
c、DOMSubtreeModified:在 DOM 结构中发生任何变化时触发。这个事件在其他任何事件触发后都会触发。
d、 DOMNodeInserted:在一个节点作为子节点被插入到另一个节点中时触发。
e、DOMNodeInsertedIntoDocument:在一个节点被直接插入文档或通过子树间接插入文档之后触发。这个事件在 DOMNodeInserted 之后触发。
  HTML5 事件
a、contextmenu：右键鼠标出现上下文菜单
b、beforeunload：这个事件会在浏览器卸载页面之前触发
c、DOMContentLoaded ：在形成完整的 DOM 树之后就会触发
d、readystatechange：这个事件的目的是提供与文档或元素的加载状态有关的信息，但这个事件的行为有时候也很难预料，支持 readystatechange 事件的每个对象都有一个 readyState 属性，可能包含下列 5 个值中的一个：

    uninitialized(未初始化):对象存在但尚未初始化。
    loading(正在加载):对象正在加载数据。

    loaded(加载完毕):对象加载数据完成。

    interactive(交互):可以操作对象了，但还没有完全加载。

    complete(完成):对象已经加载完毕

e、pageshow 和 pagehide：页面显示时触发

Firefox 和 Opera 有一个特性，名叫“往返缓存”(back-forward cache，或 bfcache)，可以在用户使用浏览器的“后退”和“前进”按钮时加快页面的转换速度。这个缓存中不仅保存着页面数据，还保存了 DOM 和 JavaScript 的状态;实际上是将整个页面都保存在了内存里。如果页面位于 bfcache 中，那么再次打开该页面时就不会触发 load 事件。但会触发pageshow事件。

！！注：虽然事件目标是document，但是必须添加到window对象

f、haschange：URL 的参数列表(及 URL 中“#”号后面的所有字符串)发生变化时触发，添加给window对象

 设备事件
a、 orientationchange：苹果公司为移动 Safari 中添加了 orientationchange 事件，以便开发人员能够确定用户何时将设备由横向查看模式切换为纵向查看模式。

移动 Safari 的 window.orientation 属性中可能包含 3 个值: 190 表示肖像模式，90 表示向左旋转的横向模式(“主屏幕”按钮在右侧)，-90 表示向右旋转的横向模式(“主屏幕”按钮在左侧)。

b、 MozOrientation

Firefox 3.6为检测设备的方向引入了一个名为MozOrientation的新事件。(前缀Moz表示这是特定于浏览器开发商的事件，不是标准事件。)当设备的加速计检测到设备方向改变时，就会触发这个事件。

c、deviceorientation：与 MozOrientation 事件类似。它也是在加速计检测到设备方向变化时在 window 对象上触发，而且具有与 MozOrientation 事件相同的支持限制。

不过，deviceorientation 事件的意图是告诉开发人员设备在空间中朝向哪儿，而不是如何移动。

d、devicemotion ：这个事件是要告诉开发人员设备什么时候移动，而不仅仅是设备方向如何改变

 触摸与手势事件

a、touchstart:当手指触摸屏幕时触发;即使已经有一个手指放在了屏幕上也会触发。

b、touchmove:当手指在屏幕上滑动时连续地触发。在这个事件发生期间，调用 preventDefault()可以阻止滚动。
c、touchend:当手指从屏幕上移开时触发。

d、touchcancel:当系统停止跟踪触摸时触发。关于此事件的确切触发时间，文档中没有明确说明。

e、gesturestart:当一个手指已经按在屏幕上而另一个手指又触摸屏幕时触发。

f、gesturechange:当触摸屏幕的任何一个手指的位置发生变化时触发。

g、gestureend:当任何一个手指从屏幕上面移开时触发。

javaScript中的事件类型

猜你喜欢