知識點：
1、 事件簡介：事件，就是檔案或瀏覽器視窗中發生的一些特定的互動瞬間，avaScript 與 HTML 之間的互動是通過事件實作的。對于 Web 應用來說，有下面這些代表性的事件：單擊事件、滑鼠移入移出事件、鍵盤按下/彈起事件等等
事件就是用戶與瀏覽器的互動行為：
1) onclick 滑鼠點擊某個物件
2) ondblclick 滑鼠雙擊某個物件
3) onerror 當加載檔案或影像時發生某個錯誤
4) onfocus 元素獲得焦點
5) onblur 元素失去焦點
6) onkeydown 某個鍵盤的鍵被按下
7) onkeypress 某個鍵盤的鍵被按下或按住
8) onkeyup 某個鍵盤的鍵被松開
9) onload 某個頁面或影像被完成加載
10) onmousedown 某個滑鼠按鍵被按下
11) onmousemove 滑鼠被移動
12) onmouseout 滑鼠從某元素移開
13) onmouseover 滑鼠被移到某元素之上
14) onmouseup 某個滑鼠按鍵被松開
15) onreset 重置按鈕被點擊
16) onresize 視窗或框架被調整尺寸
17) onselect 文本被選定
18) onsubmit 提交按鈕被點擊
19) onunload 用戶退出頁面
2、 事件物件
滑鼠 / 鍵盤屬性：
1) altKey 回傳當事件被觸發時，"ALT" 是否被按下。
2) button 回傳當事件被觸發時，哪個滑鼠按鈕被點擊。
3) clientX 回傳當事件被觸發時，滑鼠指標的水平坐標。
4) clientY 回傳當事件被觸發時，滑鼠指標的垂直坐標。
5) ctrlKey 回傳當事件被觸發時，"CTRL" 鍵是否被按下。
6) metaKey 回傳當事件被觸發時，"meta" 鍵是否被按下。
7) relatedTarget 回傳與事件的目標節點相關的節點。
8) screenX 回傳當某個事件被觸發時，滑鼠指標的水平坐標。
9) screenY 回傳當某個事件被觸發時，滑鼠指標的垂直坐標。
10) shiftKey 回傳當事件被觸發時，"SHIFT" 鍵是否被按下。
Onmousemove：該事件將會在滑鼠在元素中移動時被觸發
事件物件：當事件的回應函式被觸發時，瀏覽器每次都會將一個事件物件作為實參傳遞傳遞進回應函式,在事件物件中封裝了當前事件相關的一切資訊，比如：滑鼠的坐標 鍵盤那個按鍵被按下，滑鼠滾輪滾動的方向
clientX 可以獲取滑鼠指標的水平坐標
clientY 可以獲取滑鼠指標的垂直坐標
滑鼠從移動到矩形內開始記錄每一個坐標
3、事件冒泡
所謂冒泡指的就是事件的向上傳導，當后代元素上的事件被觸發時，其祖先元素的相同事件也會被觸發
- 在開發中大部分情況冒泡都是有用的，如果不希望冒泡發生可以通過事件物件取消冒泡 event.cancelBubble=true
4、事件的委派：指將事件統一系結給元素共同的祖先元素，這樣當后代元素上的事件觸發時，會一直冒泡到祖先元素，從而通過祖先元素的回應函式來處理事件
事件委派是利用冒泡，通過委派可以減少事件系結的次數，提高程式的性能
事件物件的屬性target：回傳觸發此事件的元素(事件的目標節點)
5、 事件的系結
語法：物件.事件=函式形式系結事件
它只能同時為同一個元素系結同一事件一次
不能系結多次，如果系結多次，后面的會覆寫掉前面的
addEventListener()
- 通過這個方法也可以為元素系結回應函式
- 引數：
1.事件的字串，不加on
2.回呼函式，當事件觸發時該函式會被呼叫
3.是否在捕獲階段觸發事件，需要一個布林值，一般都傳false
使用addEventListener()可以同時為一個元素的相同事件系結多個回應函式
這樣當事件被觸發時，回應函式將會按照函式的系結順序執行
這個方法不支持IE8及以下的瀏覽器
attachEvent()
- 在IE8中可以使用attachEvent()來系結事件
- 引數：
1.事件的字串，要on
2.回呼函式
這個方法也可以同時為一個事件系結多個處理函式
不同的是它是后系結先執行，執行順序和addEventListener()相反
6、事件的傳播
有三個階段：1、捕獲階段：從最外層的祖先元素，向目標元素進行事件的捕獲，默認不會觸發事件
2、目標階段：事件捕獲到目標元素，捕獲結束開始在目標元素上觸發事件
3、冒泡階段：事件從目標元素向他祖先元素傳遞，一次觸發祖新元素上的事件
7、拖拽事件
拖拽流程：
1) 當滑鼠被拖拽元素按下時，開始拖拽 onmousedown
2) 當滑鼠移動時被拖拽的元素跟著滑鼠移動 onmousemove
3) 當滑鼠松開時，被拖拽元素固定在當前位置 onmouseup
8、鍵盤事件：
onkeydown: 鍵盤被按下事件
- 如果一直按著某個鍵不松開，則會一直觸發該事件
- 當onkeydown事件連續觸發時，第一次和第二次之間的間隔時間稍微長一點，其他則會非常快。這是為了防止誤操作的發生
onkeyup: 鍵盤被松開的事件
鍵盤事件一般都會系結給一些可以獲取焦點的物件或則是document
可以通過keyCode來獲取按鍵的編碼，
通過它可以判斷哪個鍵被按下
除了keyCode，事件物件中還提供了幾個屬性
altKey
ctrlKey
shiftKey
- 這三個屬性分別是用來判斷alt cltrl shift是否被按下的
如果被按下了則回傳true，否則回傳false
鍵盤移動事件
事件物件：
event.keyCode 37 箭頭向左
event.keyCode 38 箭頭向上
event.keyCode 39 箭頭向右
event.keyCode 40 箭頭向下
轉載請註明出處，本文鏈接：https://www.uj5u.com/qianduan/57641.html
標籤：非技術區
上一篇：求一條正則寫法，感謝大家幫忙