遍历元素绑定事件时作用域是怎么回事啊,为什么要用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
来源:知乎
著作权归作者所有,转载请联系作者获得授权。
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关键字,而直接使用元素本身就不行?的更多相关文章
- jQuery 为动态添加的元素绑定事件
在使用jquery的方式为元素绑定事件时,我经常使用bind或者click,但这只能为页面已经加载好的元素绑定事件.像需要用ajax的方式请求远程数据来动态添加页面元素时,显然以上几种绑定事件的方式是 ...
- Jquery动态添加的元素绑定事件的3种方法
假设我们点击li标签,弹出他的文本,如果是动态添加的li,点击是没有效果的,压根弹不出来文本. 下面博主分享一下为动态添加的元素绑定事件的三种方法,网上一般都是两种,我在这里多增加了一种. 事件案例: ...
- jQuery中对未来的元素绑定事件
对未来的元素绑定事件不能用bind, 1.可以用live代替,但是要注意jquery的版本,根据官方文档,从1.7开始就不推荐live和delegate了,1.9里就去掉live了. 2.推荐用on代 ...
- jQuery中对未来的元素绑定事件用bind、live or on
对未来的元素绑定事件不能用bind, 1.可以用live代替,但是要注意jquery的版本,根据官方文档,从1.7开始就不推荐live和delegate了,1.9里就去掉live了. 2.推荐用on代 ...
- WEB前端技巧之JQuery为动态添加的元素绑定事件.md
jquery 为动态添加的元素绑定事件 如果直接写click函数的话,只能把事件绑定在已经存在的元素上,不能绑定在动态添加的元素上 可以用delegate来实现 .delegate( select ...
- js进阶---12-11、jquery如何给动态创建出来的元素绑定事件
js进阶---12-11.jquery如何给动态创建出来的元素绑定事件 一.总结 一句话总结:通过事件委托的方式,通过on方法 1.on方法在事件绑定的时候,data方式带额外参数时,字符串参数和其它 ...
- js动态添加的元素绑定事件
最近做的项目要实现一个动态添加动态删除的功能,思考了一下,该怎么给动态添加的元素绑定事件.最后觉得有两种方式比较可靠,第一种是在动态添加的html代码里添加oclick事件,然后给传个唯一的参数来判断 ...
- javascript元素绑定事件
js元素绑定事件 想给一个元素绑定一个方法之后,在绑定一个方法而且不被覆盖 window.onload = function () { alert('a'); } window.onlaod=fu ...
- vue中组件绑定事件时是否加.native
组件绑定事件时 1. 普通组件绑定事件不能添加.native, 添加后事件失效 2. 自定义组件绑定事件需要添加.native, 否则事件无效 <template> <!-- < ...
随机推荐
- HDU_1846——最简单的巴什博弈
Problem Description 十年前读大学的时候,中国每年都要从国外引进一些电影大片,其中有一部电影就叫<勇敢者的游戏>(英文名称:Zathura),一直到现在,我依然对于电影中 ...
- [Design Pattern] Flywight Pattern 简单案例
Flywight Pattern, 即享元模式,用于减少对象的创建,降低内存的占用,属于结构类的设计模式.根据名字,我也将其会理解为 轻量模式. 下面是享元模式的一个简单案例. 享元模式,主要是重用已 ...
- 首届京东自有品牌科技周“京东点亮生活”圆满成功 - 课程公告板 - 京东内部论坛 - Powered by Discuz!
首届京东自有品牌科技周"京东点亮生活"圆满成功 - 课程公告板 - 京东内部论坛 - Powered by Discuz! 首届京东自有品牌科技周"京东点亮生活" ...
- D - Constructing Roads - 2421
题意:有一些村庄需要修一些道路是所有村庄都可以连接,不过有些道路已经修好了,问题最少还需要修建的道路长度是多少. 输入的第一行是一个N代表N个村庄,下面是一个N*N的矩阵,代表着q->j的距离, ...
- java的异常处理简介
异常概述 任何一种程序设计语言设计的程序在运行时都有可能出现错误,例如除数为0,数组下标越界,要读写的文件不存在等等. 捕获错误最理想的是在编译期间,但有的错误只有在运行时才会发生. 对于这些错误,一 ...
- Android入门之ActionBar实现Tab导航
效果图: <?xml version="1.0" encoding="utf-8"?> <manifest xmlns:android=&qu ...
- cocos2d 高仿doodle jump 无源代码
1. 游戏视频 主角眼熟吗?没错,上次跑酷游戏中的"30"来Jump了,有三种道具.主角光环,竹蜻蜓.翅膀: 有两种怪物,螃蟹和鸟: 有5种板子.点击屏幕,30会把它的嘴巴3给发射 ...
- C#txt文件读写基本操作
string strFileName=@"C:\Users\Administrator\Desktop\记事2.txt"; //判断是否存在 if (File.Exists(str ...
- charAt(i) 函数
charAt(i) 函数 是获取字符串中i位置的字符 str.charAt(i)的意思是第i个字符在字符串str中所占的位置,输出的是数字 for (var i = 0; i < str.len ...
- CSS选择符详解之关系选择符篇
原文:http://www.chinaz.com/web/2012/1017/278553.shtml 相信大家都对CSS选择符都不陌生,选择符包含:元素选择符.关系选择符.属性选择符.伪类选择符.伪 ...