EventUtil.js

Posted on In

EventUtil

为了在不同的浏览器中处理相同的事件，需要编写一段可以兼容大部分浏览器的代码。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
var EventUtil = {
  addHandler: function (element, type, handler) {
    //添加事件
    if (element.addEventListener) {
      element.addEventListener(type, handler, false) //使用DOM2级方法添加事件
    } else if (element.attachEvent) {
      //使用IE方法添加事件
      element.attachEvent("on" + type, handler)
    } else {
      element["on" + type] = handler //使用DOM0级方法添加事件
    }
  },

  removeHandler: function (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
    }
  },

  getEvent: function (event) {
    //使用这个方法跨浏览器取得event对象
    return event ? event : window.event
  },

  getTarget: function (event) {
    //返回事件的实际目标
    return event.target || event.srcElement
  },

  preventDefault: function (event) {
    //阻止事件的默认行为
    if (event.preventDefault) {
      event.preventDefault()
    } else {
      event.returnValue = false
    }
  },

  stopPropagation: function (event) {
    //立即停止事件在DOM中的传播
    //避免触发注册在document.body上面的事件处理程序
    if (event.stopPropagation) {
      event.stopPropagation()
    } else {
      event.cancelBubble = true
    }
  },

  getRelatedTarget: function (event) {
    //获取mouseover和mouseout相关元素
    if (event.relatedTarget) {
      return event.relatedTarget
    } else if (event.toElement) {
      //兼容IE8-
      return event.toElement
    } else if (event.formElement) {
      return event.formElement
    } else {
      return null
    }
  },

  getButton: function (event) {
    //获取mousedown或mouseup按下或释放的按钮是鼠标中的哪一个
    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: function (event) {
    //获取表示鼠标滚轮滚动方向的数值
    if (event.wheelDelta) {
      return event.wheelDelta
    } else {
      return -event.detail * 40
    }
  },

  getCharCode: function (event) {
    //以跨浏览器取得相同的字符编码，需在keypress事件中使用
    if (typeof event.charCode == "number") {
      return event.charCode
    } else {
      return event.keyCode
    }
  },
}