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 = /^("htmlcode">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 的风格,优化代码:
(function () { var $ = function (element) { return new _$(element); }; var _$ = function (element) { this.element = element && element.nodeType === 1 "htmlcode">var outer = document.getElementById('outer'); $(outer).delegate('click', '.parag', function (event) { console.log(this.id); });以上就是本文的全部内容,希望本文的内容对大家的学习或者工作能带来一定的帮助,同时也希望多多支持!
华山资源网 Design By www.eoogi.com
广告合作:本站广告合作请联系QQ:858582 申请时备注:广告合作(否则不回)
免责声明:本站资源来自互联网收集,仅供用于学习和交流,请遵循相关法律法规,本站一切资源不代表本站立场,如有侵权、后门、不妥请联系本站删除!
免责声明:本站资源来自互联网收集,仅供用于学习和交流,请遵循相关法律法规,本站一切资源不代表本站立场,如有侵权、后门、不妥请联系本站删除!
华山资源网 Design By www.eoogi.com
暂无评论...
更新日志
2024年09月25日
2024年09月25日
- 纯音入心系列纯音乐《天籁古筝》1CD[MP3][331MB]
- 男女对唱典藏天碟《发烧对唱·那个季节里的歌DSD》10CD[WAV]
- 群星2010-歌林精选辑[歌林][WAV+CUE]
- TrioZimbalist-PianoTriosofWeinberg,Auerbach,Dvorak(2024)[24-44,1]wav
- 群星.1992-滚石第一流台湾歌·12王牌大车拼【滚石】【WAV+CUE】
- 林子祥.1984-创作歌集【华纳】【WAV+CUE】
- 周汤豪.2010-周汤豪【华纳】【FLAC分轨】
- Mozart-TheStringQuintets-AmadeusQuartet,CecilAronowitz(2017)[24-44,1][WAV+CUE]
- JamesWilliamsDennisIrwin-Focus(2024,Red)[24-48]FLAC
- 藤泽麻衣《空みあげて》[WAV]
- 纯音入心系列纯音乐《中国古筝经典名曲》1CD[MP3][1.3GB]
- 纯音入心系列纯音乐《古筝新奏:岁月静好与筝语,细水流年与筝同》1CD[MP3][846.9MB]
- 670《脆弱敏感小女生》[320K/MP3][27.53MB]
- 曾琳.2011-好好爱我【南方】【WAV+CUE】
- 范晓萱.1995-RAIN【福茂】【WAV+CUE】