webAPI

01-事件監聽

• 為什么要學事件監聽

  之前給元素注冊事件的時候,同一個事件會被覆蓋掉
  

• 事件監聽的本質

  通過另外一種方式給元素注冊事件, 同時可以解決同一個事件不會被覆蓋掉.
  

1. 知識點-通過 on 方式給元素注冊事件

   之前注冊事件的方式:事件源.onclick = function() {}on是一種方式
   click 才是一個具體的事件類型特點:
   1.無法給同一個事件源注冊同一種事件類型,后面的事件會將前面的事件覆蓋掉.
   2.對象身上有onclick這個屬性, 當給onclick這個屬性賦值的時候,屬性原來的值會被覆蓋掉
   

2. 知識點-通過addEventListener方式注冊事件

   • 語法

     事件源.addEventListener('事件類型', 函數處理程序);注意事項:
     1. 事件類型是不能代 'on'  例如點擊事件:  click
     2. 函數處理程序 可以是一個匿名函數,也可以調用一個命名函數
     3. 第二個參數函數處理程序如果是一個命名函數,那么只寫函數的名稱,不能加小括號(代表函數的調用)例如:
     btn.addEventListener('click', fn);
     function fn() {alert('你好');
     }4. 如果addEventListener想要調用一個帶有參數的函數那么可以按照如下寫法:btn.addEventListener('click', function(){fn(2);
     })function fn(a){alert(a);
     }
     

   • 特點

     • addEventListener 在注冊事件的時候,同一種事件不會被覆蓋掉
     • 原理:將事件添加到一個 eventTarget 對象集合(數組)上

3. 知識點-通過attachEvent方式注冊事件

   • attachEvent 專門為IE低版本瀏覽器設置的方法

   • 語法

     事件源.attachEvent('事件類型', 處理程序);
     

   • 特點

     • 事件類型需要加 ‘on’
     • 處理程序 與 addEventListener 中的處理程序用法一模一樣

4. 知識點-移除事件

   • 移除 on 方式注冊事件

     事件源.事件類型 = null;
     例如：div.onclick = null;
     

   • 移除addEventListener事件

     • 語法

       DOM.removeEventListener('事件類型', 命名函數)
       

     • 總結

       1. removeEventListener()這個方法就是用來移除addEventListener注冊的事件
       2. addEventListener注冊事件的時候,必須使用命名函數
       3. removeEventListener()中第二參數命名函數

   

   • 移除attachEvent事件

     DOM.detachEvent(event_type,event_name)
     

     • 總結:
       1. detachEvent方法是用來移除 attachEvent 事件的
       2. detachEvent()方法中第二個參數也需要一個命名函數
       3. detachEvent方法的使用方式與removeEventListener一樣

5. 兼容寫法

var btn = document.getElementById("myBtn");
if (btn.addEventListener) {                   btn.addEventListener("click", myFunction);
} else if (btn.attachEvent) {//兼容寫法btn.attachEvent("onclick", myFunction);
}

02-事件流

在網頁中,如果遇到嵌套的盒子, 那么當點擊子元素的時候, 父元素也會有被點擊的效果  ----> 類似于CSS中的塌陷

1. 事件流組成

   • 知識點-事件冒泡階段

     以點擊事件舉例:子元素被點了, 父元素也有被點擊的效果  ----> 事件冒泡
     

   • 知識點-事件捕獲階段

     以點擊事件舉例:當前元素被點擊的時候, 先從父元素開始執行, 然后傳到 子元素
     

   • 知識點-事件目標階段

     事件目標階段 : 就是指的是當前事件源
     

   

   • 事件流總結

     1. 事件流與注冊事件的方式沒有任何關系
     2. 不是所有的事件都有事件冒泡
     3. 如果當前事件有冒泡, 那么通過 addEventListener 可以將冒泡階段和 捕獲階段都可以通過第三參數表現出來 
     4. 如果有事件冒泡, 那么 通過 onclick 這種方式 只能看到冒泡階段, 無法表現捕獲階段(不支持第三個參數)
     

2. 事件委托

   事件委托: 屬于一種編程實現.
   事件委托: 本應該當前事件源執行對應的事件,但是最后是交給父元素執行的
   

   • 事件委托具備的條件
     • 當前元素得有父元素
     • 當前事件得有冒泡效果

3. 事件對象參數

   • 什么是事件對象參數

     事件對象參數:  事件中內置的一個參數, 保存了用戶在執行這個事件時候的一些信息比如:
     當前事件的類型, 點擊的對象是誰(真正的事件源是誰).....
     

   • 事件對象參數怎么用

     1. 事件對象參數不需要我們手動的傳值(當執行事件的時候,就會有值)
     2. 事件對象參數本質上就是一個對象

03-事件對象參數

一下的代碼結構可以用此方式查詢：

Dom.onclick = function(e){console.log(e);    }

1. e.target : 獲取真正觸發事件的對象(事件源)

2. e.type： 事件類型

3. e.clientX | e.clientY (鼠標坐標信息)

   e.clientX :  獲取鼠標的橫坐標相對整個網頁的可視區域
   e.clientY :  獲取鼠標的縱坐標相對整個網頁的可視區域
   

4. e.pageX | e.pageY (鼠標坐標信息)

   e.pageX:   獲取鼠標的橫坐標相對整個頁面的
   e.pageY:   獲取鼠標的縱坐標相對整個頁面的如果:
   1. 網頁中沒有滾動條, 默認  e.pageX  和 e.clientX
   2. 如果網頁中有滾動條, 那么  e.pageX 就要包含滾動條滾出去的位置
   

5. e.screenX | e.screenY (鼠標坐標信息)

   e.screenX: 獲取鼠標橫坐標相對整個屏幕的
   e.screenY: 獲取鼠標的縱坐標相對整個屏幕的
   

6. e.offsetX | e.offsetY (鼠標坐標信息)

   e.offsetX :  獲取鼠標橫坐標相對當前事件源左上角
   e.offsetY:   獲取鼠標縱坐標相對當前事件源左上角
   

7. e.stopPropagation() 阻止事件冒泡

   e.stopPropagation() 作用: 阻止事件冒泡
   

04-鍵盤事件對象參數

1. 知識點-onkeydown事件
2. 知識點-onkeyup事件
3. 知識點-onkeypress事件
4. 鍵盤事件對象參數
   • e.key
   • e.keyCode
5. 課堂案例-鍵盤移動案例

BOM

取鼠標縱坐標相對當前事件源左上角

7. e.stopPropagation() 阻止事件冒泡 ```js
e.stopPropagation() 作用: 阻止事件冒泡

04-鍵盤事件對象參數

1. 知識點-onkeydown事件
2. 知識點-onkeyup事件
3. 知識點-onkeypress事件
4. 鍵盤事件對象參數
   • e.key
   • e.keyCode
5. 課堂案例-鍵盤移動案例

BOM