浅谈事件代理

1、什么是事件代理

意思：代理、委托。事件代理在JS世界中一个非常有用也很有趣的功能。当我们需要对很多元素添加事件的时候，可以通过将事件添加到它们的父节点而将事件委托给父节点来触发处理函数。

2、运用场景

当子元素被频繁添加或者删除时，给子元素绑定事件，需要在每次添加或者删除时重新绑定，这就造成了非常不方便，那么此时此刻：事件代理，能帮你轻松解决这个麻烦的问题。

3、下面是我实现的一个简单的事件代理方法

 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);

运行demo：http://runjs.cn/detail/iaz5oole

关于事件代理还有很多东西可以深入学习和研究，希望大家给我支持，多留言，一起讨论，共同进步，谢谢！！！