微信公众号搜"智元新知"关注
微信扫一扫可直接关注哦!

详解js的事件代理委托

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

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

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

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

rush:js;"> var addEvent = (function () { if (document.addEventListener) { return function (element,type,handler) { element.addEventListener(type,handler,false); }; } else if (document.attachEvent) { return function (element,handler) { element.attachEvent('on' + type,function () { handler.apply(element,arguments); }); }; } else { return function (element,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,[selector,] handler var args = arguments,element = args[0],type = args[1],handler; if (args.length === 3) { handler = args[2]; return addEvent(element,handler); } if (args.length === 4) { selector = args[2]; handler = args[3]; return addEvent(element,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 的指向

rush:js;"> handler.apply(idElement,arguments); handler.apply(elements[count],arguments);

测试一下:

rush:css;">
rush:xhtml;">
aragraph1" class="parag1">paragraph1

aragraph2" class="parag">paragraph2

span

aragraph3" class="parag">paragraph3

rush:js;"> var outer = document.getElementById('outer'); delegate(outer,'click',function () { console.log(this.id); // outer });
rush:js;"> delegate(outer,'p',function () { console.log(this.id); //点击 paragraph1 元素,输出其id为 "paragraph1" });

模仿 jQuery 的风格,优化代码

rush:js;"> (function () { var $ = function (element) { return new _$(element); }; var _$ = function (element) { this.element = element && element.nodeType === 1 ? element : document; }; _$.prototype = { constructor: _$,addEvent: function (type,useCapture) { var element = this.element; if (document.addEventListener) { element.addEventListener(type,(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,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,] 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,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 $; }());

使用如下:

rush:js;"> var outer = document.getElementById('outer'); $(outer).delegate('click','.parag',function (event) { console.log(this.id); });

以上就是本文的全部内容,希望本文的内容对大家的学习或者工作能带来一定的帮助,同时也希望多多支持编程之家!

版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。

相关推荐