封装自定义监听事件

addEventListener()、removeEventListener()、attachEvent()、detachEvent()

下面 代码展示。

export const EventListener = {
  /**
   * Listen to DOM events during the bubble phase.
   *
   * @param {DOMEventTarget|Element|Document} target DOM element to register listener on.
   * @param {string} eventType Event type, e.g. 'click' or 'mouseover'.
   * @param {function} callback Callback function.
   * @return {object} Object with a `remove` method.
   */
  listen(target, eventType, callback) {
    if (target.addEventListener) {
      target.addEventListener(eventType, callback, false)
      return {
        remove() {
          target.removeEventListener(eventType, callback, false)
        }
      }
    } else if (target.attachEvent) {
      target.attachEvent('on' + eventType, callback)
      return {
        remove() {
          target.detachEvent('on' + eventType, callback)
        }
      }
    }
  }
}

封装的监听事件使用方式

引入 EventListene

import { EventListener } from  XXX;

例：监听鼠标点击事件，回调函数执行完需要 remove()
handleClick(e) {
      let hideEvent = EventListener.listen(document, 'click', () => {
        .............
        hideEvent.remove()
      })
    },