js事件代理（委托）

JavaScript事件代理（委托）一般用于以下情况：

1. 事件注册在祖先级元素上，代理其子级元素。可以减少事件注册数量，节约内存开销，提高性能。

2. 对js动态添加的子元素可自动绑定事件。

之前一直用各种js库的事件代理，如 jQuery，非常方便实用。今天尝试用原生 js 实现该功能。

 var addEvent = (function () {
   if (document.addEventListener) {
     return function (element, type, handler) {
       element.addEventListener(type, handler, false);
     };
   } else if (document.attachEvent) {
     return function (element, type, handler) {
       element.attachEvent('on' + type, function () {
         handler.apply(element, arguments);
       });
     };
   } else {
     return function (element, type, handler) {
       element['on' + type] = function () {
         return handler.apply(element, arguments);
       };
     };
   }
 })(),

 getClassElements = function (parentElement, classname) {
   var all, element, classArr = [], classElements = [];

   if (parentElement.getElementsByClassName) {
     return parentElement.getElementsByClassName(classname);
   } else {
     all = parentElement.getElementsByTagName('*');

     for (var i = 0, len = all.length; i < len; i++) {
       element = all[i];
       classArr = element && element.className && element.className.split(' ');

       if (classArr) {
         for (var j = 0; j < classArr.length; j++) {
           if (classArr[j] === classname) {
             classElements.push(element);
           }
         }
       }
     }

     return classElements;
   }
 },

 delegate = function () { // 参数：element, type, [selector,] handler
   var args = arguments,
   element = args[0],
   type = args[1],
   handler;

   if (args.length === 3) {
     handler = args[2];
     return addEvent(element, type, handler);
   }

   if (args.length === 4) {
     selector = args[2];
     handler = args[3];

     return addEvent(element, type, function (event) {
       var event = event || window.event,
       target = event.target || event.srcElement,
       quickExpr = /^(?:[a-zA-Z]*#([\w-]+)|(\w+)|[a-zA-Z]*\.([\w-]+))$/,
       match,
       idElement,
       elements,
       tagName,
       count = 0,
       len;

       if (typeof selector === 'string') {
         match = quickExpr.exec(selector);

         if (match) {
           // #ID selector
           if (match[1]) {
             idElement = document.getElementById(match[1]);
             tagName = match[0].slice(0, match[0].indexOf('#'));

           // tag selector
           } else if (match[2]) {
             elements = element.getElementsByTagName(selector);

           // .class selector
           } else if (match[3]) {
             elements = getClassElements(element, match[3]);
             tagName = match[0].slice(0, match[0].indexOf('.'));
           }
         }

         if (idElement) {
           if ( tagName ? tagName === idElement.nodeName.toLowerCase() && target === idElement : target === idElement ) {
             return handler.apply(idElement, arguments);
           }
         } else if (elements) {
           for (len = elements.length; count < len; count++) {
             if ( tagName ? tagName === elements[count].nodeName.toLowerCase() && target === elements[count] : target === elements[count] ) {
               return handler.apply(elements[count], arguments);
             }
           }
         }
       }
     });
   }
 };

主要是用 apply 改变 this 的指向

handler.apply(idElement, arguments);

handler.apply(elements[count], arguments);

测试一下：

<style>
#outer {padding: 50px; background-color: lightpink;}
#inner {padding: 30px; background-color: aliceblue;}
#paragraph1, #paragraph3 {background-color: cadetblue}
</style>

<div id="outer">outer
  <div id="inner">inner
    <p id="paragraph1" class="parag1">paragraph1</p>
    <p id="paragraph2" class="parag">paragraph2</p>
    <span>span</span>
    <p id="paragraph3" class="parag">paragraph3</p>
  </div>
</div>

var outer = document.getElementById('outer');

delegate(outer, 'click', function () {
  console.log(this.id); // outer
});

delegate(outer, 'click', 'p', function () {
  console.log(this.id);  //点击 paragraph1 元素，输出其id为 "paragraph1"
});

模仿 jQuery 的风格，优化代码：

 (function () {
   var $ = function (element) {
     return new _$(element);
   };

   var _$ = function (element) {
     this.element = element && element.nodeType === 1 ? element : document;
   };

   _$.prototype = {
     constructor: _$,

     addEvent: function (type, handler, useCapture) {
       var element = this.element;

       if (document.addEventListener) {
         element.addEventListener(type, handler, (useCapture ? useCapture : false));
       } else if (document.attachEvent) {
         element.attachEvent('on' + type, function () {
           handler.apply(element, arguments);
         });
       } else {
         element['on' + type] = function () {
           return handler.apply(element, arguments);
         };
       }

       return this;
     },

     getClassElements: function (classname) {
       var element = this.element, all, ele, classArr = [], classElements = [];

       if (element.getElementsByClassName) {
         return element.getElementsByClassName(classname);
       } else {
         all = element.getElementsByTagName('*');

         for (var i = 0, len = all.length; i < len; i++) {
           ele = all[i];
           classArr = ele && ele.className && ele.className.split(' ');

           if (classArr) {
             for (var j = 0; j < classArr.length; j++) {
               if (classArr[j] === classname) {
                 classElements.push(ele);
               }
             }
           }
         }

         return classElements;
       }
     },

     delegate: function () { //参数：type, [selector,] handler
       var self = this,
       element = this.element,
       type = arguments[0],
       handler;

       if (arguments.length === 2) {
         handler = arguments[1];
         return self.addEvent(type, handler);
       } else if (arguments.length === 3) {
         selector = arguments[1];
         handler = arguments[2];

         return self.addEvent(type, function (event) {
           var event = event || window.event,
           target = event.target || event.srcElement,
           quickExpr = /^(?:[a-zA-Z]*#([\w-]+)|(\w+)|[a-zA-Z]*\.([\w-]+))$/,
           match,
           idElement,
           elements,
           tagName,
           count = 0,
           len;

           if (typeof selector === 'string') {
             match = quickExpr.exec(selector);

             if (match) {
               // #ID selector
               if (match[1]) {
                 idElement = document.getElementById(match[1]);
                 tagName = match[0].slice(0, match[0].indexOf('#'));

               // tag selector
               } else if (match[2]) {
                 elements = element.getElementsByTagName(selector);

               // .class selector
               } else if (match[3]) {
                 elements = self.getClassElements(match[3]);
                 tagName = match[0].slice(0, match[0].indexOf('.'));
               }
             }

             if (idElement) {
               if ( tagName ? tagName === idElement.nodeName.toLowerCase() && target === idElement ? target === idElement ) {
                 return handler.apply(idElement, arguments);
               }
             } else if (elements) {
               for (len = elements.length; count < len; count++) {
                 if ( tagName ? tagName === elements[count].nodeName.toLowerCase() && target === elements[count] : target === elements[count] ) {
                   return handler.apply(elements[count], arguments);
                 }
               }
             }
           }
         });
       }
     }
   };

   window.$ = $;
   return $;
 }());

使用如下：

var outer = document.getElementById('outer');
$(outer).delegate('click', '.parag', function (event) {
  console.log(this.id);
});