Js查漏補缺-09

0x00 事件流

    removeElementListener();可以解除元素的事件監聽器綁定

    事件流是頁面中接受事件的傳遞順序，包括捕獲階段，當前目標階段，冒泡階段

     注意，Js只能執行冒泡或者捕獲中的一個階段；

    onclick等註冊事件以及attachEvent只能得到冒泡階段；

    addEventListener（）若第三個參數爲false（默認就是false），則也是冒泡階段調用事件處理程序；而若第三個參數爲true，則在捕獲階段調用事件處理程序；

   

  <div class="father">
    <p class="son">123</p>
  </div>
  <script>
    let father = document.querySelector('.father');
    let son = document.querySelector('.son');
    father.addEventListener('click', () => {
        alert('father');
    });
    son.addEventListener('click', () => {
        alert('son');
    });
  </script>

    如上，這個例子點擊son元素會先彈出son後彈出father；這是因爲在事件的冒泡階段先訪問son後訪問father

    若加上true參數，則先彈出father後彈出son

  <div class="father">
    <p class="son">123</p>
  </div>
  <script>
    let father = document.querySelector('.father');
    let son = document.querySelector('.son');
    father.addEventListener('click', () => {
        alert('father');
    },true);
    son.addEventListener('click', () => {
        alert('son');
    },true);
  </script>

    另外注意，onblur，onfocus，onmouseenter，onmouseleave是沒有冒泡的

0x01 事件對象

   事件對象保存的當前事件的信息

  

let div = document.querySelector('.name');
div.addEventListener('click',(event) => {
    console.log('第一種方法,兼容性較好')
})
div.addEventListener('click',(e) => {
    console.log('第二種方法,ie9以上才支持')
})

    獲取觸發事件對象的方法

e.target // 標準寫法
e.srcElement // 非標準寫法 ie6-8

    另外注意 e.target和this的區別

e.target // 獲取的是觸發事件的對象，click事件就是返回鼠標點擊的元素
this     // 獲取的是綁定事件的元素

    返回事件類型：e.type;