[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`