首页 > 代码库 > 遍历元素绑定事件时作用域是怎么回事啊,为什么要用this关键字,而直接使用元素本身就不行?
遍历元素绑定事件时作用域是怎么回事啊,为什么要用this关键字,而直接使用元素本身就不行?
如下代码,将this改为rows[i]为啥不起作用了
var rows = document.getElementsByTagName("tr");
for(var i=0;i<rows.length;i++){
rows[i].onmouseover=function(){
this.style.backgroundColor="#f2f2f2";
};
rows[i].onmouseout=function(){
this.style.backgroundColor="#fff";
};
}
作者:郑粲
链接:https://www.zhihu.com/question/30759173/answer/49334835
来源:知乎
著作权归作者所有,转载请联系作者获得授权。
链接:https://www.zhihu.com/question/30759173/answer/49334835
来源:知乎
著作权归作者所有,转载请联系作者获得授权。
单看这个函数
这类的在循环内部定义的匿名函数,rows[i] 里的 i 保存的是外部循环变量 i 的最后一个结果,对于这个循环也就是 rows.length。而 rows[rows.length] 是不存在的(数组的最后一项也就是 rows[rows.length - 1])。
如果想使得函数于列表项一一对应,可以在使用一个闭包对 i 进行一次保存,也就是这样:
也可以这样:
function () {
rows[i].style.backgroundColor = ‘#f2f2f2‘;
};
如果想使得函数于列表项一一对应,可以在使用一个闭包对 i 进行一次保存,也就是这样:
rows[i].onmouseover = (function (n) {
return function () {
rows[n].style.backgroundColor = ‘#f2f2f2‘;
}
}(i));
for (var i = 0; i < rows.length; i++) {
rows[i].index = i;
rows[i].onmouseover = function () {
rows[this.index].style.backgroundColor = ‘#f2f2f2‘;
}
}
// 通过给对应项添加属性 index 来保存 i 的值
遍历元素绑定事件时作用域是怎么回事啊,为什么要用this关键字,而直接使用元素本身就不行?
声明:以上内容来自用户投稿及互联网公开渠道收集整理发布,本网站不拥有所有权,未作人工编辑处理,也不承担相关法律责任,若内容有误或涉及侵权可进行投诉: 投诉/举报 工作人员会在5个工作日内联系你,一经查实,本站将立刻删除涉嫌侵权内容。