冒泡捕获

  • IE采用冒泡型事件 Netscape使用捕获型事件 DOM使用先捕获后冒泡型事件,冒泡型事件模型: button->div->body (IE事件流) 捕获型事件模型: body->div->button (Netscape事件流)
  • DOM事件模型: body->div->button->button->div->body (先捕获后冒泡),在IE8及以下的事件处理中,事件含有on,如onclick等。

兼容代码

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
<button id="btn">11</button>
<script>

var EventUtil = {
addHandler: function(element, type, handler) {
//绑定事件
//Chrome Firefox IE9等 addEventListener
//IE8及IE8以下的浏览器 attachEvent
if(element.addEventListener) {
element.addEventListener(type, handler, false);
} else if(element.attachEvent) {
element.attachEvent("on" + type, handler);
} else {
element["on" + type] = handler
}
},
removeHandler: function(element, type, handler) {
//移除事件
//Chrome Firefox IE9等
//IE8及IE8以下的浏览器
if(element.removeEventListener) {
element.removeEventListener(type, handler, false);
} else if(element.detachEvent) {
element.detachEvent("on" + type, handler);
} else {
element["on" + type] = handler
}
},
getTarget: function(event) {
return event.target || event.srcElement;
},
preventDefault: function(event) {
if(event.preventDefault) {
event.preventDefault();
} else {
event.returnValue = false;
}
},
stopPropagation: function(event) {
if(event.stopPropagation) {
event.stopPropagation()
} else {
event.cancelBubble = true;
}
}
}

var handler=function () {
alert("11");
}

EventUtil.addHandler(btn,"click",handler);
EventUtil.removeHandler(btn,"click",handler);
</script>