addEvent.js源碼解析

露露

前言：
看兩三遍便可。

在看 jQuery 源碼時，發現了這段註釋：

  //源碼5235行
  /*
 * Helper functions for managing events -- not part of the public interface.
 * Props to Dean Edwards' addEvent library for many of the ideas.
 */
  jQuery.event = { }
複製代碼

Dean Edwards 的 addEvent.js 庫爲 jQuery 的事件綁定提供了不少想法，咱們就來看下 2005 年的 addEvent.js 。

〇、先複習下 Object 的內存地址指向的知識

  let a={ }
  let b=a
  b[0]='111'

  console.log(a,'a55') //{0:'111'}
複製代碼

b 改變屬性，a 也會改變，由於 b 與 a 指向同一地址（b=a）

1、addEvent()
做用：
爲目標元素綁定事件（如 click）

源碼：

  //addEvent即爲DOM元素綁定事件

  // a counter used to create unique IDs
  //爲每個事件添加惟一的id
  addEvent.guid = 1;

  function addEvent(element, type, handler) {
    // assign each event handler a unique ID
    //若是用戶自定義的回調函數沒有$$guid的話，
    //爲每一個handler添加惟一的id
    if (!handler.$$guid) handler.$$guid = addEvent.guid++;
    // create a hash table of event types for the element
    //爲目標元素添加events屬性
    if (!element.events) element.events = {};
    // create a hash table of event handlers for each element/event pair
    //events是目標元素綁定的事件的集合
    //第一次使用addEvent綁定每每是undefined
    let handlers = element.events[type];
    if (!handlers) {
      handlers = element.events[type] = {};
      // store the existing event handler (if there is one)
      //handlers的0屬性做爲目標元素的原生綁定事件
      if (element["on" + type]) {
        handlers[0] = element["on" + type];
      }
    }
    // store the event handler in the hash table
    //將每次綁定的事件保存到handler的id屬性中
    handlers[handler.$$guid] = handler;

    // assign a global event handler to do all the work
    //爲目標元素的原生事件綁定處理程序（handleEvent）
    element["on" + type] = handleEvent;
  }
複製代碼

解析：
注意let handlers = element.events[type]，handlers 與 element.events[type] 指向同一地址，接下來都是對 handlers 進行操做，實際上也就是對 element.events 進行操做

關鍵！
addEvent 的目的是讓目標元素的結構以下：

element:{
  //依次執行了 click 對象裏的每一個 handler
  onclick:handleEvent(MouseEvent)
  events:{
    click:{
      // 若是先onclick了，就會在這裏
      // 0 : onclick（也就是 function (e) {console.log('原生點擊了one')}）
      1 : handler（也就是 function(){console.log('點擊了one')}  ）
      2 : handler （ xxx ）
      3 : ...
     .. : ...    
    },
    foucus:{

    }, 
    ..... :{

    }

  }
}
複製代碼

注意裏面的註釋。
（1）能夠看到經過 addEvent 綁定的'click'事件並非真的綁定在 element 上，而是把綁定的事件處理程序（handler）都放到了 element 的 events 上，即綁定事件和目標元素的分離

（2）由 handleEvent 來統一執行 click 事件

2、handleEvent()
做用：
執行事件的處理程序

源碼：

  //執行事件的處理程序
  function handleEvent(event) {
    // grab the event object (IE uses a global event object)
    console.log(event,'event55')
    //event即MouseEvent,原生的鼠標事件集合
    event = event || window.event;
    // get a reference to the hash table of event handlers
    //找到相同事件的處理程序
    //注意這個this，指的是目標元素
    //找到handlers集合
    let handlers = this.events[event.type];
    // execute each event handler

    //依次執行事件的處理程序
    for (let i in handlers) {
      this.$$handleEvent = handlers[i];
      this.$$handleEvent(event);
    }
  }
複製代碼

解析：
（1）看到上面的關鍵，再看 handleEvent 就簡單地多，就是把 element->events->click 裏的事件處理程序都執行下

（2）主要看for 裏面，多了個handlers 和 handleEvent，我感受是多餘的（不知道下面說的對不對，由於想到了中學解數學題，當你以爲題幹中的條件你用不到時，每每是本身想錯了），由於直接這麼寫就行了啊：

寫法一：

  function handleEvent(event) {
    event = event || window.event;
    for (let i in this.events[event.type]) {
      this.events[event.type][i](event)
    }
 }
複製代碼

寫法二：

  function handleEvent(event) {
    event = event || window.event;
    let handlers = this.events[event.type];
    for (let i in handlers) {
      handlers[i].call(this,event)
    }
 }
複製代碼

根據this是誰調用的，this就是誰的原則，那麼handleEvent的this是element["on"+type]，即element.onclick在調用handleEvent方法，既然是element的屬性onclick在調用的話，那麼執行的上下文就是element，this即element

Dean Edwards用this.$$handleEvent來執行handler，目的也是保證正確的做用域，即this

3、removeEvent

  //移除監聽事件
  function removeEvent(element, type, handler) {
    // delete the event handler from the hash table
    console.log(handler,'handler52')
    if (element.events && element.events[type]) {
      delete element.events[type][handler.$$guid];
    }
  }
複製代碼

注意：不把自定義事件包成一個變量，是移除不了監聽事件的：

  let one=document.querySelector("#one")
  addEvent(one,'click',function () {
    console.log('點擊了one')
  })
  removeEvent(one,'click',function () {
    console.log('點擊了one')
  })
複製代碼

寫成這樣才能夠：

  let one=document.querySelector("#one")
  let handler=function () {
    console.log('點擊了one')
  }
  addEvent(one,'click',handler)
  removeEvent(one,'click',handler)
複製代碼

4、實驗

<div id="one">幹我</div>

  let one=document.querySelector("#one")

  one.onclick=function (e) {
    console.log('原生點擊了one')
  }

  addEvent(one,'click',function () {
    console.log('點擊了one')
  })
複製代碼

輸出：原生點擊了one 點擊了one

<div id="one">幹我</div>

  let one=document.querySelector("#one")

  addEvent(one,'click',function () {
    console.log('點擊了one')
  })

  one.onclick=function (e) {
    console.log('原生點擊了one')
  }
複製代碼

輸出：原生點擊了one ，緣由是後面的 one.onclick 覆蓋了 addEvent() 裏的事件綁定

固然 jQuery 是都會觸發的。

5、內存泄漏
簡單說：
element只綁定一次onclick，只綁定一次events。
並經過guid來爲每個handler定一個id，而後依次添加進events.click中，並經過onclick執行

若是一直調用onclick來綁定事件的話，內存開銷會很大。

最後：
完整代碼請看github.com/AttackXiaoJ…

---

（完）