JavaScript事件代理（委托）一般用于以下情况：1. 事件注册在祖先级元素上，代理其子级元素。可以减少事件注册数量，节约内存开销，提高性能。2. 对js动态添加的子元素可自动绑定事件。本文主要介绍用原生 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 主要是用 apply 改变 this 的指向
handler.apply(idElement, arguments); handler.apply(elements[count], arguments);
测试一下：
outerinnerparagraph1
paragraph2
spanparagraph3
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 使用如下：
var outer = document.getElementById('outer'); $(outer).delegate('click', '.parag', function (event) { console.log(this.id); });以上就是详解js的事件代理（委托）的详细内容，更多请关注0133技术站其它相关文章！
