Javascript中事件的委託和模擬

內存和性能

事件類型是在太多了，直接跳到事件內存和型能這裏

• 事件委託

  因爲事件冒泡的原理，能夠只盯一個事件處理程序，用來管理一個類型的全部事件，好比click事件會一直冒泡到document層次，也就是說若是能夠的話，整個頁面指定一個onclick事件，而沒必要給全部元素分別添加事件處理程序

  利用事件委託，再上級或者儘可能高的DOM層次中添加一個事件處理程序，用來管理下級DOM的全部事件

• 移除事件處理程序

  因爲在銷燬DOM元素的時候並不會移除事件監聽程序的，因此會形成不同的內存冗餘

  養成良好的習慣，在移除DOM元素以前，先移除元素的監聽事件

  還有就是頁面有一個onunload事件，在頁面被卸載前執行，可是須要考慮一些變量已經被釋放的問題，還有就是若是有緩存頁面，可能設計了這種方式就不會走緩存

• 模擬事件

  • DOM中的模擬事件
    • 主要方法document.createEvent
    • 過程
      • 使用document.createEvent建立時間，傳入事件類型，返回一個包含初始化事件方法的對象
      • 使用事件相關信息進行事件初始化event.initMouseEvent(info),這裏須要對應事件類型的初始化方法
      • 使用el.dispatchEvent(event)在對應元素觸發事件
    • 注意：在該元素觸發事件，若是沒有特殊處理，也會按照正常的事件冒泡進入事件流網上傳遞
  • 模擬自定義DOM事件
    • 方法跟上面相似，可是初始化事件的時候使用initCustomEvent進行初始化
    • 初始化結束以後仍然須要dispatch到對應元素進行派發
    • initCustomEvent有四個參數
      • 事件類型
      • 是否冒泡
      • 是否可取消
      • detail
  • IE中的事件模擬
    • 邏輯跟DOM中的事件模擬差很少，只是方法名有一些不同
    • 建立事件document.createEvent
    • 初始化事件這裏返回的對象就不包括初始化方法，直接往事件對象上添加屬性event.returnValue= false
    • 在目標元素上調用觸發事件函數el.fireEvent(event)

Javascript 事件這一塊就算告一段落，天天一小步，加油！