實現合成事件

react的合成事件是如何實現的呢？他們都是把事件綁定到了document，下面簡單模仿一下：

  <div>
    <ul id="app">
      <li class="childClassname">11</li>
      <li class="childClassname">11</li>
    </ul>
  </div>

核心代碼

    let parentElement = document.getElementById('app')
    function callback (e) {
      console.log('ok', e)
    }
    delegate(parentElement).on('childClassname', 'click', callback);
    delegate(parentElement).off('childClassname', 'click', callback);

    function delegate (parentElement) {
      function on (childClassname, eventType, listener) {
        let list = parentElement.getElementsByClassName(childClassname)
        Array.from(list, (dom) => {
          let eventStore = dom.eventStore || (dom.eventStore = {})
          eventStore[eventType] = listener;
        })
        document.addEventListener(eventType, dispatchEvent, false)
      }
      function dispatchEvent (event) {
        let { type, target } = event
        let eventType = type;
        while (target) {
          let { eventStore } = target;
          let listener = eventStore && eventStore[eventType]
          if (listener) {
            listener.call(target, event)
          }
          target = target.parentNode;
        }
      }
      function off (childClassname, eventType, listener) {
        let list = parentElement.getElementsByClassName(childClassname)
        Array.from(list, (dom) => {
          let eventStore = dom.eventStore
          let listener = eventStore && eventStore[eventType]
          if (listener) {
            eventStore[eventType] = null
          }
        })
      }
      return {on, off}
    }