addEventListener、attachEvent、cancelBubble兼容性隨筆

本文轉載自查看原文 2013-10-31 02:47 2676 [19] JavaScript系列

一、前言

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>

免責聲明！

本站轉載的文章為個人學習借鑒使用，本站對版權不負任何法律責任。如果侵犯了您的隱私權益，請聯系本站郵箱yoyou2525@163.com刪除。

猜您在找 addEventListener兼容性問題 getElementsByTagName() 兼容性 attachEvent和addEventListener區別總結 rgba兼容性處理 mouseenter以及mouseleave兼容性兼容性的設計要求 fixed定位兼容性彈性盒兼容性火狐對SVG的兼容性 css 顏色漸變兼容性