没有合适的资源?快使用搜索试试~ 我知道了~
关于 JavaScript 的事件绑定在网上已经有不少相关的资料了,今天这篇文章也是在被同事问及的时候才顺便把它记录下来,算是 JavaScript 事件绑定中的一个小技巧,如果能在工作中善加利用,会有出其不意的效果
资源推荐
资源详情
资源评论
浅谈浅谈JavaScript之事件绑定之事件绑定
关于 JavaScript 的事件绑定在网上已经有不少相关的资料了,今天这篇文章也是在被同事问及的时候才顺便把
它记录下来,算是 JavaScript 事件绑定中的一个小技巧,如果能在工作中善加利用,会有出其不意的效果
其实没有什么新的知识点,只是为了方便其他有需要的朋友们翻阅,对自己而言也算是一个积累,所以只能算是闲谈
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'),
资源评论
weixin_38631331
- 粉丝: 5
- 资源: 907
上传资源 快速赚钱
- 我的内容管理 展开
- 我的资源 快来上传第一个资源
- 我的收益 登录查看自己的收益
- 我的积分 登录查看自己的积分
- 我的C币 登录后查看C币余额
- 我的收藏
- 我的下载
- 下载帮助
安全验证
文档复制为VIP权益,开通VIP直接复制
信息提交成功