如下代码,将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
来源:知乎
著作权归作者所有,转载请联系作者获得授权。

单看这个函数

function () {
rows[i].style.backgroundColor = '#f2f2f2';
};

这类的在循环内部定义的匿名函数,rows[i] 里的 i 保存的是外部循环变量 i 的最后一个结果,对于这个循环也就是 rows.length。而 rows[rows.length] 是不存在的(数组的最后一项也就是 rows[rows.length - 1])。

如果想使得函数于列表项一一对应,可以在使用一个闭包对 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关键字,而直接使用元素本身就不行?的更多相关文章

  1. jQuery 为动态添加的元素绑定事件

    在使用jquery的方式为元素绑定事件时,我经常使用bind或者click,但这只能为页面已经加载好的元素绑定事件.像需要用ajax的方式请求远程数据来动态添加页面元素时,显然以上几种绑定事件的方式是 ...

  2. Jquery动态添加的元素绑定事件的3种方法

    假设我们点击li标签,弹出他的文本,如果是动态添加的li,点击是没有效果的,压根弹不出来文本. 下面博主分享一下为动态添加的元素绑定事件的三种方法,网上一般都是两种,我在这里多增加了一种. 事件案例: ...

  3. jQuery中对未来的元素绑定事件

    对未来的元素绑定事件不能用bind, 1.可以用live代替,但是要注意jquery的版本,根据官方文档,从1.7开始就不推荐live和delegate了,1.9里就去掉live了. 2.推荐用on代 ...

  4. jQuery中对未来的元素绑定事件用bind、live or on

    对未来的元素绑定事件不能用bind, 1.可以用live代替,但是要注意jquery的版本,根据官方文档,从1.7开始就不推荐live和delegate了,1.9里就去掉live了. 2.推荐用on代 ...

  5. WEB前端技巧之JQuery为动态添加的元素绑定事件.md

      jquery 为动态添加的元素绑定事件 如果直接写click函数的话,只能把事件绑定在已经存在的元素上,不能绑定在动态添加的元素上 可以用delegate来实现 .delegate( select ...

  6. js进阶---12-11、jquery如何给动态创建出来的元素绑定事件

    js进阶---12-11.jquery如何给动态创建出来的元素绑定事件 一.总结 一句话总结:通过事件委托的方式,通过on方法 1.on方法在事件绑定的时候,data方式带额外参数时,字符串参数和其它 ...

  7. js动态添加的元素绑定事件

    最近做的项目要实现一个动态添加动态删除的功能,思考了一下,该怎么给动态添加的元素绑定事件.最后觉得有两种方式比较可靠,第一种是在动态添加的html代码里添加oclick事件,然后给传个唯一的参数来判断 ...

  8. javascript元素绑定事件

    js元素绑定事件   想给一个元素绑定一个方法之后,在绑定一个方法而且不被覆盖 window.onload = function () { alert('a'); } window.onlaod=fu ...

  9. vue中组件绑定事件时是否加.native

    组件绑定事件时 1. 普通组件绑定事件不能添加.native, 添加后事件失效 2. 自定义组件绑定事件需要添加.native, 否则事件无效 <template> <!-- < ...

随机推荐

  1. sql server 修改字段大小

    alter table AAA ALTER COLUMN BBBvarchar(100);  这种语法只适合把字段往大了设置,  如果更新的字段大小比实际的要小时,并且数据库已存在比要更新的数据大时, ...

  2. Delphi Ini 操作简单例子

    interface uses   Windows, Messages, SysUtils, Variants, Classes, Graphics, Controls, Forms,   Dialog ...

  3. 两个Select 之间的值的传递

    运行效果: 下面是代码: <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN"> <HTML ...

  4. STL_iterator迭代器(2)——几种迭代器对象的用法

    要学会使用迭代器和容器以及算法,需要学习下面的新技术. 一.流和迭代器 本书的很多例子程序使用I/O流语句来读写数据.例如: int value; cout << "Enter ...

  5. Perl时间处理函数

    官方网址:http://search.cpan.org/~stbey/Date-Calc-6.3/lib/Date/Calc.pod#___top use Date::Calc qw( Days_in ...

  6. 《Linear Algebra and Its Applications》-chaper2-矩阵代数中的基本性质

    之前我们曾经提及,完成了线性方程组-向量方程-矩阵方程的等价转化之后,我们对于现实问题中的线性方程组,只需将其转移到矩阵(向量)方程,然后利用矩阵代数中的各种方法和性质进行计算或者化简即可,而下面我们 ...

  7. linux用户权限相关命令

    1.创建组 groupadd test     修改组 groupmod -n test2 test 将名字改为test2     删除组 groupdel test     查看组 groups r ...

  8. SKPhysicsBody类

    继承自 NSObject 符合 NSCodingNSCopyingNSObject(NSObject) 框架  /System/Library/Frameworks/SpriteKit.framewo ...

  9. oracle中从指定日期中获取月份或者部分数据

    从指定日期中获取部分数据: 如月份: select to_CHAR(sysdate,'MM') FROM DUAL; 或者: select extract(month from sysdate) fr ...

  10. Jquery UI的datepicker插件使用

    原文链接;http://www.ido321.com/375.html Jquery UI是一个非常丰富的Jquery插件,而且UI的各部分插件能够独自分离出来使用.这是其它非常多Jquery插件没有 ...