內(nèi)存和性能

事件類(lèi)型是在太多了，直接跳到事件內(nèi)存和型能這里

• 事件委托

  由于事件冒泡的原理，可以只盯一個(gè)事件處理程序，用來(lái)管理一個(gè)類(lèi)型的所有事件，比如click事件會(huì)一直冒泡到document層次，也就是說(shuō)如果可以的話(huà)，整個(gè)頁(yè)面指定一個(gè)onclick事件，而不必給所有元素分別添加事件處理程序

  利用事件委托，再上級(jí)或者盡量高的DOM層次中添加一個(gè)事件處理程序，用來(lái)管理下級(jí)DOM的所有事件

• 移除事件處理程序

  由于在銷(xiāo)毀DOM元素的時(shí)候并不會(huì)移除事件監(jiān)聽(tīng)程序的，所以會(huì)造成不一樣的內(nèi)存冗余

  養(yǎng)成良好的習(xí)慣，在移除DOM元素之前，先移除元素的監(jiān)聽(tīng)事件

  還有就是頁(yè)面有一個(gè)onunload事件，在頁(yè)面被卸載前執(zhí)行，但是需要考慮一些變量已經(jīng)被釋放的問(wèn)題，還有就是如果有緩存頁(yè)面，可能設(shè)計(jì)了這種方式就不會(huì)走緩存

• 模擬事件

  • DOM中的模擬事件
    • 主要方法document.createEvent
    • 過(guò)程
      • 使用document.createEvent創(chuàng)建時(shí)間，傳入事件類(lèi)型，返回一個(gè)包含初始化事件方法的對(duì)象
      • 使用事件相關(guān)信息進(jìn)行事件初始化event.initMouseEvent(info),這里需要對(duì)應(yīng)事件類(lèi)型的初始化方法
      • 使用el.dispatchEvent(event)在對(duì)應(yīng)元素觸發(fā)事件
    • 注意：在該元素觸發(fā)事件，如果沒(méi)有特殊處理，也會(huì)按照正常的事件冒泡進(jìn)入事件流網(wǎng)上傳遞
  • 模擬自定義DOM事件
    • 方法跟上面類(lèi)似，但是初始化事件的時(shí)候使用initCustomEvent進(jìn)行初始化
    • 初始化結(jié)束之后仍然需要dispatch到對(duì)應(yīng)元素進(jìn)行派發(fā)
    • initCustomEvent有四個(gè)參數(shù)
      • 事件類(lèi)型
      • 是否冒泡
      • 是否可取消
      • detail
  • IE中的事件模擬
    • 邏輯跟DOM中的事件模擬差不多，只是方法名有一些不一樣
    • 創(chuàng)建事件document.createEvent
    • 初始化事件這里返回的對(duì)象就不包括初始化方法，直接往事件對(duì)象上添加屬性event.returnValue= false
    • 在目標(biāo)元素上調(diào)用觸發(fā)事件函數(shù)el.fireEvent(event)

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