JS學習之事件和事件繫結

事件和事件繫結

// 事件和事件繫結
/* 
 * 什麼是事件？
     事件是瀏覽器賦予元素的預設行為，也可以理解為事件時元素天生自帶的，不論是否給其繫結方法，當某些行為觸發的時候，相關的事件都會被執行觸發


 * 瀏覽器賦予元素的事件行為
    - 滑鼠事件
      + click  點選/單擊事件（PC）
      + dbclick  雙擊事件
      + contextmenu  滑鼠右鍵點選事件
      + mousedown  滑鼠按下
      + mouseup  滑鼠抬起
      + mousemove  滑鼠移動
      + mouseover  滑鼠滑入
      + mouseout  滑鼠滑出
      + mouseleave  滑鼠離開
      + mouseenter  滑鼠進入
      + mousewheel  滑鼠滾輪滾動
      + ...

    - 鍵盤事件
      + keydown  鍵盤南下
      + keyup  鍵盤抬起
      + keypress  長按鍵盤（除了Shift、Fn、CapsLook鍵外）

    - 手指事件（移動端）
      [Touch Event 單手指事件]
        + touchstart  手指按下
        + touchmove  手指移動
        + touchend  手指鬆開
        + touchcancel  觸控中斷
      [Gesture Event 多手指事件]
        + gesturestart—手勢開始，手指觸碰當前元素，螢幕上有兩個或者兩個以上的手指
        + gesturechange—手勢變化，手指觸碰當前元素，螢幕上有兩個或者兩個以上的手指位置在發生移動
        + gestureend—手勢結束，在gesturestart後, 螢幕上只剩下兩根以下（不包括兩根）的手指
      注意：gesture系列事件目前只有IOS上的瀏覽器支援

    - 表單事件
      + focus  獲取焦點
      + blur  失去焦點
      + reset  點選重置按鈕（前提：表單都包含在form中）
      + submit  點選提交按鈕（前提：表單都包含在form中）
      + selecte  有文字被選中
      + change  內容改變（輸入完內容，輸入框失去游標時觸發）
      + input  內容改變（在輸入內容過程中會一直觸發）
      + ...

    - 資源事件
      + error  資源載入失敗時
      + load  資源載入成功
      + beforeunload  資源解除安裝之前（window.beforeunload 頁面關閉之前觸發）
      + ...

    - CSS3動畫事件
      + transitionend  過渡完成
      + transitionstart  過渡開始
      + transitionrun   正在過渡中
      + ...

    - 檢視事件
      + resize  視窗大小改變觸發
      + scroll  滾動條滾動

    - ...



 * 什麼是事件繫結？
     給元素預設的事件行為繫結方法，這樣可以在行為觸發的時候，執行這個方法
     - DOM0級事件繫結
       語法：[元素].on[事件] = [函式]
       document.body.onclick = function(){}

       移除繫結：賦值為null或者其他非函式型別的值
       document.body.onclick = null

       原理：每一個DOM元素物件的私有屬性上有很多類似於"onxxx"的屬性（初始值都是null），給這些代表事件的私有屬性進行賦值，就是DOM0級事件繫結
          + 如果沒有對應事件的私有屬性（例如：DOMContentLoaded）則無法基於這種辦法事件事件繫結
          + 一個事件行為只能繫結一個方法（同一個事件行為繫結多次最後都只會觸發最後繫結的那個）
          + 好處是執行效率快，而且開發者使用起來也方便

     - DOM2級事件繫結
       語法：[元素].addEventListener([事件],[方法],[捕獲/冒泡])
       document.body.addEventListener('click', fn1,false)

       移除繫結：[元素].removeEventListener([事件],[方法],[捕獲/冒泡]) 要求所有引數和繫結時的一樣
       document.removeEventListener('click', fn1, false)

       原理：每一個DOM元素都會基於原型鏈的查詢機制，查詢到EventTarget.prototype上的addEventListener/removeEventListener等方法，基於這些方法實現事件的繫結和移除；
          + DOM2級事件繫結，繫結的方法一般是具名函式（為了方便移除繫結）
          + 凡是瀏覽器提供的實現行為，都可以基於這種方法實現事件繫結和移除（例如：window.addEventLIstener('DOMContentLoaded',fun)）
          + DOM2級事件繫結基於事件池機制：同一個元素的同一個事件行為可以同時繫結多個不同的方法，當某一事件行為觸發的時候，會按照給事件型別繫結方法時的順序依次執行所有繫結的方法
          
*/

function f1(){
  console.log('f1');
}
function f2(){
  console.log('f2');
}
function f3(){
  console.log('f3');
}
document.body.addEventListener('click', f1, false);
document.body.addEventListener('click', f2, false);
document.body.addEventListener('click', f3, false);
// 點選body會移除輸出 f1 f2 f3