addEventListener、attachEvent、cancelBubble兼容性随笔

一、前言

1、 element.addEventListener(eventType, handler, capture);

（1）参数eventType是要注册句柄的事件类型名。

（2）参数handler是句柄函数，在指定类型事件发生时调用该函数。

（3）参数capture用于在事件传播的捕获阶段事件句柄是否用于捕捉事件。

2、element.attachEvent("on" + eventType, handler);

该方法作为全局函数调用，而不是作为事件句柄所注册的元素的方法来调用的。允许同一个事件句柄函数多次注册。

3、相关自定义类Binder代码如下：

 1 (function (window) {
 2     if (!window.jasen) {
 3         window.jasen = {};
 4     }
 5 
 6     if (!window.jasen.core) {
 7         window.jasen.core = {};
 8     }
 9 
10     if (!window.jasen.core.Binder) {
11         window.jasen.core.Binder = {};
12     }
13 
14     if (typeof jasen.core.Binder != "object") {
15         throw new Error("Invalid entity jasen.core.Binder!");
16     }
17 
18     function bind(element, eventType, handler, capture) {
19         if (typeof element == "string") {
20             element = document.getElementById(element);
21         }
22 
23         if (typeof capture != "Boolean") {
24             capture = false;
25         }
26 
27         if (element.addEventListener) {
28             element.addEventListener(eventType, handler, capture); // Allow to register the same event handler only one. 
29         }
30         else if (element.attachEvent) {
31             if (capture) {
32                 element.setCapture();
33             }
34 
35             element.attachEvent("on" + eventType, handler); // Allow to register the same event handler more times. 
36         }
37         else {
38             element["on" + eventType] = handler; // Non support Capture.
39         }
40     }
41 
42     function unbind(element, eventType, handler, releaseCapture) {
43         if (typeof element == "string") {
44             element = document.getElementById(element);
45         }
46 
47         if (typeof releaseCapture != "Boolean") {
48             releaseCapture = false;
49         }
50 
51         if (element.removeEventListener) {
52             element.removeEventListener(eventType, handler, releaseCapture);
53         }
54         else if (element.detachEvent) {
55             if (releaseCapture) {
56                 element.releaseCapture();
57             }
58 
59             element.detachEvent("on" + eventType, handler);
60         }
61         else {
62             element["on" + eventType] = null;
63         }
64     }
65 
66     function cancelBubble(e) {
67         e = e || window.event;
68 
69         if (e.stopPropagation) {
70             e.stopPropagation();
71         }
72         else {
73             e.cancelBubble = true; //IE
74         }
75     }
76 
77     var binder = window.jasen.core.Binder;
78     binder.bind = bind;
79     binder.unbind = unbind;
80     binder.cancelBubble = cancelBubble;
81 
82     window.Binder = binder;
83 
84 })(window);

二、范例

<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
    <title></title>
    <script type="text/javascript" src="Scripts/jasen.core.Binder.js"></script>
</head>
<body>
    <form id="form1" runat="server">
    <div>
        <input type="button" id="test" value="bind element"/>
    </div>
    <script type="text/javascript">
        jasen.core.Binder.bind("test", "click", function () { alert("....."); }, true);
    </script>
    </form>
</body>
</html>