如下代码,将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. CSU 1559 订外卖

    题目链接:http://acm.hust.edu.cn/vjudge/contest/view.action?cid=82842#problem/E 订外卖 解题思路:定义两个数组,a[]表示满A,b ...

  2. winPcap_5_打开适配器并捕获数据包

    知道如何获取适配器的信息了,那我们就开始一项更具意义的工作,打开适配器并捕获数据包.编写一个程序,将每一个通过适配器的数据包打印出来. 打开设备的函数是 pcap_open(). (Open a ge ...

  3. 【用PS3手柄在安卓设备上玩游戏系列】连接手柄和设备

    背景 硬件要求1:PS3 手柄 + 手柄配套的USB线 硬件要求2:已经获得 ROOT 权限并且支持蓝牙的安卓设备 软件要求1:Sixaxis Compatibility Checker PS3 手柄 ...

  4. Selenium webdriver 查找元素

    1.简单查找 By ID: WebElement element=driver.findElement(By.id("userId")); By Name:WebElement e ...

  5. P - 奔小康赚大钱 - hdu 2255(带权值的匹配)

    分析:这是一个KM的模板题,也就不多说了,KM最复杂的情况都能过,下面是没有优化过的代码: ****************************************************** ...

  6. Byte[]、Image、Bitmap_之间的相互转换

    1.将图片Image转换成Byte[] /// <summary>        /// 将图片Image转换成Byte[]        /// </summary>     ...

  7. top -Hp pid 显示所有的线程

    可以显示所有的线程 top -Hp pid [root@jiangyi01.sqa.zmf /home/ahao.mah] #top -Hp 41330 top - 22:49:40 up 27 da ...

  8. Java虚拟机内存区域堆(heap)的管理

    在上一节中Java 出现内存溢出的定位以及解决方案 中对于Java虚拟机栈以及方法区的内存出现的异常以及处理方式进行了解析,由于Java虚拟机对于堆的管理十分复杂,并且Java虚拟机中最基本的内存区域 ...

  9. 【转】IOS7 MPMoviePlayerViewController横屏显示

    在应用程序中用到MPMoviePlayerViewController时,有时需要保持应用程序为竖屏状态,而视频播放器显示为横屏,如何做呢?如果采用强制横屏的方法,应用审核的时候是不会通过的,因为该方 ...

  10. git 取消追踪

    git rm --cached filePath这个操作不会删除这个文件