EventUtil--跨浏览器的事件对象

转载自 EventUtil–跨浏览器的事件对象

前言

在开发PC端应用时，经常需要兼容不同的浏览器，特别是IE浏览器，如此，每次都需要写相同的兼容代码，现将兼容代码封装成util，供大家参考。

代码

// EventUtil.js
export default {
  // 添加事件
  addHandler (element, type, handler) {
    if (element.addEventListener) {
      element.addEventListener(type, handler, false)
    } else if (element.attachEvent) {
      element.attachEvent(`on${type}`, handler)
    } else {
      element[`on${type}`] = handler
    }
  },
  // 取消事件
  removeHandler (element, type, handler) {
    if (element.removeEventListener) {
      element.removeEventListener(type, handler, false)
    } else if (element.detachEvent) {
      element.detachEvent(`on${type}`, handler)
    } else {
      element[`on${type}`] = null
    }
  },
  // 跨浏览器取得event对象
  getEvent (event) {
    return event || window.event
  },
  // 返回事件的实际目标
  getTarget (event) {
    return event.target || event.srcElement
  },
  // 阻止事件的默认行为
  preventDefault (event) {
    if (event.preventDefault) {
      event.preventDefault()
    } else {
      event.returnValue = false
    }
  },
  // 立即停止事件在DOM中的传播
  stopPropagation (event) {
    // 避免触发注册在document.body上面的事件处理程序
    if (event.stopPropagation) {
      event.stopPropagation()
    } else {
      event.cancelBubble = true
    }
  },
  // 获取mouseover和mouseout相关元素
  getRelatedTarget (event) {
    if (event.relatedTarget) {
      return event.relatedTarget
    } else if (event.toElement) { // 兼容IE8-
      return event.toElement
    } else if (event.formElement) {
      return event.formElement
    } else {
      return null
    }
  },
  // 获取mousedown或mouseup按下或释放的按钮是鼠标中的哪一个
  getButton (event) {
    if (document.implementation.hasFeature('MouseEvents', '2.0')) {
      return event.button
    } else {
      switch (event.button) { // 将IE模型下的button属性映射为DOM模型下的button属性
        case 0:
        case 1:
        case 3:
        case 5:
        case 7:
          return 0 // 按下的是鼠标主按钮（一般是左键）
        case 2:
        case 6:
          return 2 // 按下的是中间的鼠标按钮
        case 4:
          return 1 // 鼠标次按钮（一般是右键）
      }
    }
  },
  // 获取表示鼠标滚轮滚动方向的数值
  getWheelDelta (event) {
    if (event.wheelDelta) {
      return event.wheelDelta
    } else {
      return -event.detail * 40
    }
  },
  // 以跨浏览器取得相同的字符编码，需在keypress事件中使用
  getCharCode (event) {
    if (typeof event.charCode === 'number') {
      return event.charCode
    } else {
      return event.keyCode
    }
  }
}