2.事件繫結

weixin_34290000發表於2016-10-13

事件繫結就是通過給一個物件新增一個事件,在該事件發生後,執行一個函式

事件繫結方法:

  • 在DOM元素中直接繫結

詳情請戳事件繫結-DOM元素中直接繫結

  • 在JavaScript程式碼中通過on來進行繫結

詳情請戳事件繫結-on

  • 在JavaScript程式碼中通過addEventListener()方法來進行繫結

詳情請戳事件繫結-addEventListener()方法

  • 在JavaScript程式碼中通過attachEvent()方法來進行繫結(IE8以下相容性問題的解決方案)

IE的方法,其他瀏覽器均不支援:)

總結

在不考慮相容性的情況下:

  • 在DOM元素中直接寫事件繫結不利於程式碼的維護和修改,而且會在html骨架中新增很多冗餘的東西,這裡不考慮使用
  • on和addEventListener()方法比較:
    • 兩者中的this均指向當前物件
    • 兩者的事件處理函式都可以為匿名函式或者命名函式
      on在這裡沒有什麼限制
      addEventListener()方法中使用命名函式更為整潔,而且有利於事件繫結的移除
    • 如果要對事件新增多個事件處理函式
      on只能新增一個,如果有多個,後面的會覆蓋前面的
      addEventListener()方法則沒有限制
    • 事件處理函式的執行時機
      on只能在事件冒泡時執行事件處理函式
      addEventListener()方法可以通過第三個引數-布林值來控制事件處理函式的執行時機

在考慮相容性問題(IE8以下)的情況下:

  • on在使用時需要注意事件處理函式圓括號內的事件物件引數的呼叫方法,在IE中event是自帶的事件物件
  • addEventListener()是標準的繫結事件監聽函式的方法,是W3C所支援的,但是並不支援IE8以下
  • 利用框架裡面寫好的相容性函式,或者使用attachEvent()方法
  • 讓IE被W3C的大車輪碾壓致死吧 :-)

相關文章