浅谈JavaScript之事件绑定


Posted in Javascript onJuly 08, 2013

其实没有什么新的知识点,只是为了方便其他有需要的朋友们翻阅,对自己而言也算是一个积累,所以只能算是闲谈 JavaScript,老鸟们可以尽情飘过。
在进入正题之前,先提个问题热热身吧。
现在有如下 HTML 结构:

<div id="wrap">
 <input type="button" value="按钮一" />
 <input type="button" value="按钮二" />
 <input type="button" value="按钮三" />
 <input type="button" value="按钮四" />
 <input type="button" value="按钮五" />
</div>

以及如下 JavaScript 代码:
var wrap = document.getElementById('wrap'), 
    inputs = wrap.getElementsByTagName('input'); for (var i = 0, l = inputs.length; i < l; i++) { 
    inputs[i].onclick = function () { 
        alert(i); 
    } 
}

请问,这样执行的结果是什么?
/***************************分割线***************************/
如果你的回答是“点击按钮时, alert 当前按钮的索引值 i”,那你就中了我的圈套了。大家不妨试试,无论你点击哪个按钮,它都会alert(5)。

这个看似理所当然的结果为什么会和实际情况不同呢?其实也是很好理解的。
因为 onclick 只是事件绑定,而不是执行,当我们执行 onclick 事件的时候,这时的 i 已经是循环以后的值了,照这样看,每个按钮都alert(5) 也就不足为奇了。

那么,如果我们要怎么实现“点击按钮时,alert 当前按钮的索引值 i”呢?这里就要用到 JavaScript 中暗藏玄机的一个概念“闭包”。我们可以用闭包的方式改写以上 JS,把 for 循环中的 i 值保存在内存中,代码如下:

var wrap = document.getElementById('wrap'), 
    inputs = wrap.getElementsByTagName('input'); for (var i = 0, l = inputs.length; i < l; i++) { 
    (function (cur) { 
        inputs[cur].onclick = function () { 
            alert(cur); 
        } 
    })(i) 
}

再试试效果?确实能 alert 出相应的索引值了,不过至此为止还只是开胃菜,正题才刚刚开始!
以上的方法,我们是通过循环 + 闭包给 button 按钮上绑定事件,我们知道,在 JavaScript 中函数也是对象,对象就会占用内存,现在的例子中只有 5 个按钮,或许你会认为这样的性能开销可以忽略不计,但是如果当我们有 50个,甚至 500 个按钮的时候,IE 已经哭了,当有更多其他性能隐患并发时,所有的浏览器都哭了。

回到刚才的例子,我们可以用“事件委托”的方法来解决这个因绑定事件随着按钮增加而可能导致的性能问题。原理很简单,利用 Javascript 的事件冒泡,我们可以把事件的绑定从按钮移到它们的父级元素上,不管按钮有多少,它们只有一个共同的父级元素,那样我们只需要绑定一次事件就可以了。
代码如下:

var wrap = document.getElementById('wrap'), 
    inputs = wrap.getElementsByTagName('input'); wrap.onclick = function (ev) { 
    var ev = ev || window.event, 
    target = ev.target || ev.srcElement; 
    for (var i = 0, l = inputs.length; i < l; i++) { 
        if (inputs[i] === target) { 
            alert(i) 
        } 
    } 
}

至此,正餐完毕,我们还可以再深入一下,来些餐后甜点。
除了在性能上,事件委托比闭包的事件绑定更有优势以外,事件委托还无需顾及子元素(即被绑定事件的元素)的数量。比如,我们在 onclick 事件绑定以后,增加一个按钮:
var newInput = document.createElement('input'); 
newInput.setAttribute('type', 'button'); 
newInput.setAttribute('value', '按钮六'); 
wrap.appendChild(newInput);

同样在最后加了这段代码的闭包方式和事件委托方式,我们可以看到,闭包实现的事件绑定中点击“按钮六”毫无效果,但是在事件委托中实现的事件绑定点击“按钮六”则会有 alert。相反,如果我们要删除一个按钮,闭包的方式仍会在内存中保存已删除按钮的 onclick 事件(除非手动设为 null),事件委托则不会对内存造成多余的负担,就为这个原因,我们也应该多加利用事件委托的方式来绑定同一层级的多个元素。
Javascript 相关文章推荐
Javascript this指针
Jul 30 Javascript
关于文本框的一些限制控制总结~~
Apr 15 Javascript
jquery $.getJSON()跨域请求
Dec 21 Javascript
javascript:history.go()和History.back()的区别及应用
Nov 25 Javascript
Node.js与Sails ~项目结构与Mvc实现及日志机制
Oct 14 Javascript
一道关于JavaScript变量作用域的面试题
Mar 08 Javascript
jquery div模态窗口的简单实例
May 28 Javascript
全面解析Bootstrap中scrollspy(滚动监听)的使用方法
Jun 06 Javascript
基于JavaScript实现鼠标箭头移动图片跟着移动
Aug 30 Javascript
Angular实现的日程表功能【可添加及隐藏显示内容】
Dec 27 Javascript
Vue+ElementUI项目使用webpack输出MPA的方法
Aug 27 Javascript
原生JS与CSS实现软件卸载对话框功能
Dec 05 Javascript
JS Map 和 List 的简单实现代码
Jul 08 #Javascript
利用JS实现浏览器的title闪烁
Jul 08 #Javascript
利用js实现遮罩以及弹出可移动登录窗口
Jul 08 #Javascript
使用jquery实现简单的ajax
Jul 08 #Javascript
从数据结构的角度分析 for each in 比 for in 快的多
Jul 07 #Javascript
JavaScript 上万关键字瞬间匹配实现代码
Jul 07 #Javascript
20行代码实现的一个CSS覆盖率测试脚本
Jul 07 #Javascript
You might like
发挥语言的威力--融合PHP与ASP
2006/10/09 PHP
php预定义常量
2006/12/25 PHP
PHP程序员编程注意事项
2008/04/10 PHP
php生成不重复随机数、数组的4种方法分享
2015/03/30 PHP
php如何利用pecl安装mongodb扩展详解
2019/01/09 PHP
js 小数取整的函数
2010/05/10 Javascript
基于jquery的横向滚动条(滑动条)
2011/02/24 Javascript
JQuery datepicker 使用方法
2011/05/20 Javascript
分享20多个很棒的jQuery 文件上传插件或教程
2011/09/04 Javascript
html中的input标签的checked属性jquery判断代码
2012/09/19 Javascript
解决jquery1.9不支持browser对象的问题
2013/11/13 Javascript
js实现的复制兼容chrome和IE
2014/04/03 Javascript
解决angular的post请求后SpringMVC后台接收不到参数值问题的方法
2015/12/10 Javascript
借助FileReader实现将文件编码为Base64后通过AJAX上传
2015/12/24 Javascript
JS控制层作圆周运动的方法
2016/06/20 Javascript
javascript 动态脚本添加的简单方法
2016/10/11 Javascript
jQuery实现简单弹窗遮罩效果
2017/02/27 Javascript
微信小程序手势操作之单触摸点与多触摸点
2017/03/10 Javascript
web前端vue之CSS过渡效果示例
2018/01/10 Javascript
理解JavaScript中的对象
2020/08/25 Javascript
python抓取某汽车网数据解析html存入excel示例
2013/12/04 Python
进一步了解Python中的XML 工具
2015/04/13 Python
Python fileinput模块使用实例
2015/05/28 Python
对pandas中apply函数的用法详解
2018/04/10 Python
python装饰器-限制函数调用次数的方法(10s调用一次)
2018/04/21 Python
基于Python实现迪杰斯特拉和弗洛伊德算法
2020/05/27 Python
PyTorch 中的傅里叶卷积实现示例
2020/12/11 Python
美国老牌主机服务商:iPage
2016/07/22 全球购物
世界排名第一的运动鞋市场:Flight Club
2020/01/03 全球购物
给校长的建议书400字
2014/05/15 职场文书
面试感谢信范文
2015/01/22 职场文书
学校捐书倡议书
2015/04/27 职场文书
父母教会我观后感
2015/06/17 职场文书
学雷锋活动简报
2015/07/20 职场文书
人身损害赔偿协议书
2016/03/22 职场文书
读《皮囊》有感:理解是对他人的最大的善举
2019/11/14 职场文书