[TOC] * * * * * ### 一. 鼠标点击事件： * DOM2级事件有：click, mousedown, mouseup, mousemove, mouseout ; * DOM3级事件有：mouseenter, mouseleave, dbclick ~~~ 触发顺序： 1. mousedown 2. mouseup 3. click 4. mousedown 5. mouseup 6. click 7. dbclick ~~~ >[danger] 如果禁掉 down 或 up 事件，那么就不会有 click 事件了，也就没有 dbclick 事件了，而且有些事件必须由鼠标来点击触发，不能由键盘触发； 当然还有滚轮事件 * * * * * ### 二. 鼠标点击事件的位置  1. 客户区坐标位置： `(clientX,clientY)` 这个里的值可以通过 `event.clientX/Y` 得到，指的是点击的那个点在浏览器视口上的位置  2. 页面坐标位置： `(pageX,pageY)` 这个是点击的点相对于网页，整个文档的位置，如果没有滚动页面，那么和客户区位置相同 可是一旦滚动，那就不同了  3. 屏幕坐标位置 `(screenX,screenY) `这个是相对于整个电脑屏幕的，有时候浏览器会是全屏或者缩小；  4. 相对于父包含框的位置  5. 下面这俩未知   ~~~ .button 属性 DOM 的事件规则下，有3个可能的值 0：表示主鼠标按钮（左键） 1：鼠标按钮（滚动按钮） 2：次鼠标按钮（有右键） ~~~ `.detail` 属性 包含一个数值，表示在给定位置上发生了多少次单击。在同一个像素上相继的发生一次 `mousedown` 和 `mouseup` 事件才算做一次单击。`detail` 属性从1开始计数，每次单击后会递增，如果在 `mousedown` 和 `mouseup` 之间移动了位置，则 `detail` 会被重置为0 * * * * * ### 三. 触摸屏上的 `touch` 事件对应 ~~~ 1. touchstart 2. mouseover 3. mousemove（一次） 4. mousedown 5. mouseup 6. click 7. touchend ~~~ * * * * * ### 四. 鼠标滚轮事件 `IE6` 开始支持，这一事件可在任何元素上触发 `.wheelDelta` 是 120(滚轮向前)/-120(滚轮向后)的倍数 * * * * * ### 五. 键盘和文本事件 ~~~ keydown ：当用户按下键盘上的任意键时触发，如果按住不放会重复触发 keypress： 当用户按住键盘上的字符键时触发，如果按住不放会重复触发 keyup： 当用户释放键盘上的键时触发 ~~~ 所有元素都支持以上事件，如果需要处理这一事件，可查询具体的键码，进行相应的操作。 `textInput` 事件（`DOM3`） 这一事件只有在可编辑区域才会触发；且用户按下能输入实际字符的键时才会被触发；比如按了退格键，由于能够影响文本显示，则会触发 `keypress` 事件，但无法触发`textInput` 事件。 通过 `.inputMethod` 还能知道文本是怎么输入的（高程3中说仅 `IE` 支持，未做验证，但是个思路）  * * * * * ### 六. 变动事件 `DOM2` 级的变动（`mutation`）事件能在 `DOM` 中的某一部分发生变化时给出提示。这一事件到目前未曾用过。 ### 七. `HTML5` 事件 1. `contextmenu` 事件，经测试不可用 2. `beforeunload` 在用户点击了关闭标签页按钮，或者使用 `window.close()` 被调用时候，原理就是页面卸载之前，提示用户是否继续 如果页面有什么重要数据未保存等，保险起见吧 `event.returnValue` 显示要提示的信息 3. `DOMContentLoaded` `window` 的 `load` 事件是在所有资源都加载完成后触发。而这个事件只要 `DOM` 树生成好了，就会触发，而不去理会图像、js、css等资源是否已经下载完成 `IE9` 之前的不支持 4. `hashchange` 专门应对地址后面的 `hash` 值的变化，`location.hash`