浅谈事件代理

 1 /**
 2      * 事件处理对象
 3      * @type {{addHandler: addHandler, removeHandler: removeHandler}}
 4      */
 5     var EventUtil = {
 6         addHandler: function (element, type, handler) {
 7             if (element.addEventListener) {
 8                 element.addEventListener(type, handler, false);
 9             } else if (element.attachEvent) {
10                 element.attachEvent("on" + type, handler);
11             } else {
12                 element["on" + type] = handler;
13             }
14         },
15         removeHandler: function(element, type, handler){
16             if (element.removeEventListener){
17                 element.removeEventListener(type, handler, false);
18             } else if (element.detachEvent){
19                 element.detachEvent("on" + type, handler);
20             } else {
21                 element["on" + type] = null;
22             }
23         }
24     };
25     /**
26      * 比较当前选择于目标函数是否相等
27      * @param element 当前元素
28      * @param selector 目标元素标识
29      */
30     function matchesSelector(element, selector){
31         if(element.matches){
32             return element.matches(selector);
33         } else if(element.matchesSelector){
34             return element.matchesSelector(selector);
35         } else if(element.webkitMatchesSelector){
36             return element.webkitMatchesSelector(selector);
37         } else if(element.msMatchesSelector){
38             return element.msMatchesSelector(selector);
39         } else if(element.mozMatchesSelector){
40             return element.mozMatchesSelector(selector);
41         } else if(element.oMatchesSelector){
42             return element.oMatchesSelector(selector);
43         } else if(element.querySelectorAll){
44             var matches = (element.document || element.ownerDocument).querySelectorAll(selector),
45                 i = 0;
46             while(matches[i] && matches[i] !== element) i++;
47             return matches[i] ? true: false;
48         }
49         throw new Error(‘Your browser version is too old,please upgrade your browser‘);
50     }
51 
52     /**
53      *
54      * @param parent 父节点id或者父节点元素
55      * @param eventStr 触发事件
56      * @param childTag 触发事件元素标志
57      * @param handler 事件句柄
58      * @constructor
59      */
60     function Delegate (parent, eventStr, childTag, handler) {
61         var event = eventStr.toLowerCase(),
62             parentObj = null;
63         if (typeof parent == ‘object‘) {
64             parentObj =
65                     parent === document || parent === document.body || parent === document.documentElement ?
66                     document.body :
67                     parent;
68         } else {
69             parentObj = document.getElementById(parent);
70         }
71         EventUtil.addHandler(parentObj, event, function (e) {
72             var parentElement = e.target;
73             while (parentElement != e.currentTarget) {//从子节点向上冒泡遍历每一个节点与目标节点比较，一直到父节点停止
74                 if (matchesSelector(parentElement, childTag)) {
75                     handler.call(parentElement, e);
76                 }
77                 parentElement = parentElement.parentElement;
78             }
79         });
80     }
81 
82     Delegate(document, ‘click‘, ‘.a‘, function () {
83         alert(this.innerHTML);
84     }, false);
85     Delegate(‘J_list2Wrapper‘, ‘click‘, ‘li‘, function () {
86         alert(this.innerHTML);
87     }, false);
88     Delegate(‘J_list3Wrapper‘, ‘click‘, ‘span‘, function () {
89         alert(this.innerHTML);
90     }, false);