详解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 的指向