详解事件代理委托

http://www.jb51.net/article/100809.htm

这篇博客非常的棒，

+ View Code?

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92

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

　测试代码：

+ View Code?

1 2 3 4 5 6 7 8 9 10 11

<div class="animated bounceOut cc">this is our 未来！</div>     <div class="haha" style="padding:50px;border:1px solid red;">               </div>     <script type="text/javascript" src="./main.js"></script>     <script>         window.delegate($('.haha')[0], 'mouseover', '.haha1', function(event) {             alert("nihao");         });         $('.haha').append('<div class="haha1" style="display: inline-block;width: 500px;height: 300px;border:1px solid black;">this is hahaboy!</div>');     </script>

　　但是作者还提供了一种，类似jquery的方法。

自己看吧，z真心感觉厉害