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>outer <div>inner <p>paragraph1</p> <p>paragraph2</p> <span>span</span> <p>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); });
以上就是本文的全部内容，希望本文的内容对大家的学习或者工作能带来一定的帮助，同时也希望多多支持脚本之家！
您可能感兴趣的文章: