你的位置:首页 > Java教程

[Java教程]js事件代理(委托)


JavaScript事件代理(委托)一般用于以下情况:

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

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

 

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

 1 var addEvent = (function () { 2  if (document.addEventListener) { 3   return function (element, type, handler) { 4    element.addEventListener(type, handler, false); 5   }; 6  } else if (document.attachEvent) { 7   return function (element, type, handler) { 8    element.attachEvent('on' + type, function () { 9     handler.apply(element, arguments); 10    }); 11   }; 12  } else { 13   return function (element, type, handler) { 14    element['on' + type] = function (event) { 15     return handler.apply(element, arguments); 16    }; 17   }; 18  } 19 })(), 20  21 getClassElements = function (parentElement, classname) { 22  var all, element, classArr = [], classElements = []; 23  24  if (parentElement.getElementsByClassName) { 25   return parentElement.getElementsByClassName(classname); 26  } else { 27   all = parentElement.getElementsByTagName('*'); 28  29   for (var i = 0, len = all.length; i < len; i++) { 30    element = all[i]; 31    classArr = element && element.className && element.className.split(' '); 32  33    if (classArr) { 34     for (var j = 0; j < classArr.length; j++) { 35      if (classArr[j] === classname) { 36       classElements.push(element); 37      } 38     } 39    } 40   } 41  42   return classElements; 43  } 44 }, 45  46 delegate = function (element, type, selector, handler) { 47  var args = arguments, 48  element = args[0], 49  type = args[1], 50  handler; 51  52  if (args.length === 3) { 53   handler = args[2]; 54   return addEvent(element, type, handler); 55  } 56  57  if (args.length === 4) { 58   selector = args[2]; 59   handler = args[3]; 60  61   return addEvent(element, type, function (event) { 62    var event = event || window.event, 63    target = event.target || event.srcElement, 64    quickExpr = /^(?:[a-zA-Z]*#([\w-]+)|(\w+)|[a-zA-Z]*\.([\w-]+))$/, 65    match, 66    idElement, 67    elements, 68    tagName, 69    count = 0, 70    len; 71  72    if (typeof selector === 'string') { 73     match = quickExpr.exec(selector); 74  75     if (match) { 76      // #ID selector 77      if (match[1]) { 78       idElement = document.getElementById(match[1]); 79       tagName = match[0].slice(0, match[0].indexOf('#')); 80  81      // tag selector 82      } else if (match[2]) { 83       elements = element.getElementsByTagName(selector); 84  85      // .class selector 86      } else if (match[3]) { 87       elements = getClassElements(element, match[3]); 88       tagName = match[0].slice(0, match[0].indexOf('.')); 89      } 90     } 91  92     if (idElement) { 93      if ( target === idElement && (tagName ? idElement.nodeName.toLowerCase() === tagName : true) ) { 94       return handler.apply(idElement, arguments); 95      } 96     } else if (elements) { 97      for (len = elements.length; count < len; count++) { 98       if ( target === elements[count] && (tagName ? elements[count].nodeName.toLowerCase() === tagName : true) ) { 99        return handler.apply(elements[count], arguments);100       }101      }102     }103    }104   });105  }106 };

主要是用 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 的风格,优化代码:

 1 (function () { 2  var $ = function (element) { 3   return new _$(element); 4  }; 5  6  var _$ = function (element) { 7   this.element = element && element.nodeType === 1 ? element : document; 8  }; 9  10  _$.prototype = { 11   constructor: _$, 12  13   addEvent: function (type, handler, useCapture) { 14    var element = this.element; 15  16    if (document.addEventListener) { 17     element.addEventListener(type, handler, (useCapture ? useCapture : false)); 18    } else if (document.attachEvent) { 19     element.attachEvent('on' + type, function () { 20      handler.apply(element, arguments); 21     }); 22    } else { 23     element['on' + type] = function (event) { 24      return handler.apply(element, arguments); 25     }; 26    } 27  28    return this; 29   }, 30  31   getClassElements: function (classname) { 32    var element = this.element, all, ele, classArr = [], classElements = []; 33  34    if (element.getElementsByClassName) { 35     return element.getElementsByClassName(classname); 36    } else { 37     all = element.getElementsByTagName('*'); 38  39     for (var i = 0, len = all.length; i < len; i++) { 40      ele = all[i]; 41      classArr = ele && ele.className && ele.className.split(' '); 42  43      if (classArr) { 44       for (var j = 0; j < classArr.length; j++) { 45        if (classArr[j] === classname) { 46         classElements.push(ele); 47        } 48       } 49      } 50     } 51  52     return classElements; 53    } 54   }, 55  56   delegate: function () { //参数:type, [selector,] handler 57    var self = this, 58    element = this.element, 59    type = arguments[0], 60    handler; 61  62    if (arguments.length === 2) { 63     handler = arguments[1]; 64     return self.addEvent(type, handler); 65    } else if (arguments.length === 3) { 66     selector = arguments[1]; 67     handler = arguments[2]; 68  69     return self.addEvent(type, function (event) { 70      var event = event || window.event, 71      target = event.target || event.srcElement, 72      quickExpr = /^(?:[a-zA-Z]*#([\w-]+)|(\w+)|[a-zA-Z]*\.([\w-]+))$/, 73      match, 74      idElement, 75      elements, 76      tagName, 77      count = 0, 78      len; 79  80      if (typeof selector === 'string') { 81       match = quickExpr.exec(selector); 82  83       if (match) { 84        // #ID selector 85        if (match[1]) { 86         idElement = document.getElementById(match[1]); 87         tagName = match[0].slice(0, match[0].indexOf('#')); 88  89        // tag selector 90        } else if (match[2]) { 91         elements = element.getElementsByTagName(selector); 92  93        // .class selector 94        } else if (match[3]) { 95         elements = self.getClassElements(match[3]); 96         tagName = match[0].slice(0, match[0].indexOf('.')); 97        } 98       } 99 100       if (idElement) {101        if ( target === idElement && (tagName ? idElement.nodeName.toLowerCase() === tagName : true) ) {102         return handler.apply(idElement, arguments);103        }104       } else if (elements) {105        for (len = elements.length; count < len; count++) {106         if ( target === elements[count] && (tagName ? elements[count].nodeName.toLowerCase() === tagName : true) ) {107          return handler.apply(elements[count], arguments);108         }109        }110       }111      }112     });113    }114   }115  };116 117  window.$ = $;118  return $;119 }());

View Code

使用如下:

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