Js 事件基礎

時間 2020-05-14

標籤事件基礎欄目 JavaScript 简体版

原文原文鏈接

一：js中常見得事件html

（1） : 鼠標事件

click ：點擊事件

dblclick ：雙擊事件

contextmenu ：右鍵單擊事件

mousedown ：鼠標左鍵按下事件

mouseup ：鼠標左鍵擡起事件

mousemove ：鼠標移動

mouseover ：鼠標滑入事件

mouseout ：鼠標滑出事件

mouseenter ：鼠標移入事件

mouseleave ：鼠標移出事件

（2）：鍵盤事件

keyup ：鍵盤擡起事件

keydown ：鍵盤按下事件

keypress ：鍵盤按下事件

（3）：表單事件

change : 表單內容改變事件

input : 表單內容輸入事件

blur : 表單失去焦點

focus：表單獲取焦點

二：事件偵聽過程詳解

　　1：事件偵聽 - 就是給事件源（dom元素）綁定一個事件

　　　給DOM元素添加一個事件偵聽（監聽）,這個DOM元素只能收到對應事件類型的消息

　　　語法： DOM元素.addEventListener(事件類型,事件回調函數,是否捕獲時執行) - addEventListener這個就是用來偵聽事件得關鍵字

　　　偵聽事件addEventListenerd的三個參數參數：

參數1：事件類型 - 必須是字符串，能夠設置爲任意字符串，可是部分字符串是系統事件類型

參數2: 事件回調函數 - 指向一個函數，當收到事件時執行該函數，若是沒有收到不執行函數，寫偵聽事件時不執行函數

注意1：事件回調函數 - 有且僅有一個參數爲 e - event對象

注意2：e 是一個事件對象,偵聽事件收到消息時得到的事件對象

　　　　 參數3：是否捕獲時執行 - 默認值是false，在冒泡時執行，捕獲時不執行 / 若是設置爲true，在捕獲時執行

1 // 建立一個偵聽事件 , 事件類型爲 點擊 click ,回調函數爲clickHandler ,默認 冒泡
2             document.addEventListener('click',clickHandler)
3 
4 // 事件回調函數的參數  MouseEvent - 鼠標事件
5             function clickHandler(e) {
6                 console.log("我被點擊了")  
7             }

　　在上面得代碼中偵聽事件得對象爲 document 就是網頁，當咱們點擊網頁得任何一個位置就會觸發點擊事件，那麼就會執行事件的回調函數 clickHandler，打印結果dom

　　1.2：刪除事件　　函數

　　　　刪除事件：語法 - 偵聽對象.removeEventListener(事件類型,事件回調函數) IE8 以上支持

刪除事件的兼容寫法：attachEvent 僅IE8及如下支持事件類型 "on"+type 沒有捕獲、冒泡階段選項

 1 <!DOCTYPE html>
 2 <html lang="en">
 3 <head>
 4     <meta charset="UTF-8">
 5     <meta name="viewport" content="width=device-width, initial-scale=1.0">
 6     <title>Document</title>
 7 </head>
 8 <body>  
 9     <button id="btn">按鈕</button>
10 </body>
11 <script>
12         // 獲取dom元素
13         var btn = document.querySelector('#btn')
14         // 偵聽事件
15         btn.addEventListener('click',clickHandler1)
16         // 事件回調函數
17         var num = 0
18         function clickHandler1(e){
19             num++
20             console.log('當num > 3 得時候刪除事件')
21             if (num>3){
22                 // 刪除事件
23                 e.currentTarget.removeEventListener('click',clickHandler1)
24             }
25         }    
26 </script>
27 </html>

　　當咱們不斷點擊按鈕，就會不斷的觸發事件，每點擊一次 num 的值就會增長，當num大於3時，就刪除本次建立的事件和事件回調函數，爲何要刪除事件呢？由於當元素的事件再也不使用時，必須刪除，不然會形成內存堆積，偵聽事件都會被存儲在堆中，當元素被刪除了，也必須刪除該元素的全部事件。spa

　　2：事件偵聽與拋發 code

　　事件偵聽語法：事件偵聽對象.addEventListener(事件類型,事件回調函數,是否捕獲時執行)htm

　　建立事件對象語法：var evt = new Event(事件類型) -指建立一個事件對象對象

拋發事件語法：事件偵聽對象.dispatchEvent(接受事件對象變量)

　　在咱們建立事件的過程當中，必須先偵聽在拋發 - 若是先拋發在偵聽，咱們將沒法獲取到事件是否被觸發

在咱們使用偵聽事件的過程當中須要注意：

1：事件拋發通常分兩種：系統拋發事件 / 自定義拋發事件(須要咱們本身建立事件對象)

2：偵聽和拋發的對象是同一個

3：偵聽和拋發的事件類型徹底相同

4：事件回調函數不能使用return 返回值，可是能夠return 跳出

 1 // 偵聽事件
 2         document.addEventListener('奧裏給',customHandler)
 3 // 建立一個事件對象 
 4         var evt = new Event('奧裏給')
 5 // 拋發事件
 6         document.dispatchEvent(evt)
 7 // 事件回調函數
 8         function customHandler(e) {
 9             console.log(e.type)  //e.type 查看事件的類型

10 }

三：事件三階段

　　　　一階段：捕獲由外到內

二階段：目標到達目標

三階段：冒泡由內到外

　　事件三階段案例：先寫好html代碼顯示三個背景顏色不同的塊。以下

js代碼

 1 // 獲取 標籤
 2     var div0 = document.querySelector('.div0')    // 綠色背景塊
 3     var div1 = document.querySelector('.div1')    // 淺粉色塊
 4     var div2 = document.querySelector('.div2')    // 紅色塊
 5 
 6      // 給每一個塊都添加點擊事件  
 7     div0.addEventListener('click',clickHandler0)
 8     div1.addEventListener('click',clickHandler1)
 9     div2.addEventListener('click',clickHandler2)
10     function clickHandler0(e){
11         console.log('點擊div0')
12     }
13 
14     function clickHandler1(e){
15         console.log('點擊div1')
16         
17     }
18 
19     function clickHandler2(e){
20         console.log('點擊div2')
21     }

當咱們在點擊紅色塊時，咱們會發現，div1和div2都被打印了，這就是事件的冒泡，咱們點擊的真正目標爲紅色塊div2，可是卻觸發了其餘兩個塊，那麼事件如何進行三階段的呢？首先當咱們點擊紅色塊div2時，事件進入一階段，捕獲階段，他會先進入div0，查找目標，當沒有發現，會進入下一層查找目標，當進入粉絲塊時，也沒有發現咱們想要的目標，當進入紅色塊div2 時，就會找到咱們點擊的目標，div2，這個時候事件的一階段就變成了二階段，目標階段，就會開始向外發送信息觸發事件，執行事件回調函數，並由二階段變成三階段，冒泡階段，這時是由內向外的一個過程，不斷的往外並觸發通過的塊的事件，直到最外層，這就是事件三階段的全過程。那麼咱們可不可讓他不冒泡呢，有 blog

阻止冒泡語法 e.stopPropagation() 只須要寫在想中止冒泡的事件回調函數中

阻止事件冒泡 - 當咱們只想讓紅色塊觸發事件，其餘兩個塊不觸發就是不冒泡，就在紅色塊的事件回調函數中，寫上阻止事件冒泡，這樣當事件到二階段找到目標時，就不會往外冒泡了，那麼div0和div1就不會被觸發，看以下代碼，

 1     div0.addEventListener('click',clickHandler0)
 2     div1.addEventListener('click',clickHandler1)
 3     div2.addEventListener('click',clickHandler2)
 4     function clickHandler0(e){
 5         console.log('點擊div0')
 6         
 7     }
 8 
 9     function clickHandler1(e){
10         console.log('點擊div1')
11         
12     }
13 
14     function clickHandler2(e){
15         e.stopPropagation()  // 阻止事件冒泡
16         console.log('點擊div2') 
17 
18     }