js中變量的作用域是怎么一回事？
as=box.getElementsByTagName('a')；
for(var i=0; i<as.length; i++) {
??????? as[i].onmouseover = function() {
??????????? this.style.background = '#D0D6D9';
??????? }
??????? as[i].onmouseout = function() {
??????????? this.style.background = '#FFF';
??????? }
??????? as[i].onclick = function() {
??????????? title.innerHTML = this.innerHTML;
??????? }
??? }
上段代碼中，使用this.style可以而使用as[i].style為什么不可以？？？
2016-04-18
你綁定事件是i只是個引用，循環(huán)結束后i的值就變了，你可以試試每次輸出的i都死i.length.在js中for是無作用域的。執(zhí)行dom節(jié)點操作時取得便是for最后的i++的值.這是JavaScript一個經(jīng)典問題:在遍歷數(shù)組時對DOM監(jiān)聽事件,索引值始終等于遍歷結束后的值.
解決方法:
方法一:利用必包
for(var i=0;i<as.length;i++){
? ? (function (_i){
? ? ?as[_i].onmouseover = function() {
??????????? this.style.background = '#D0D6D9';
??????? }
??????? as[_i].onmouseout = function() {
??????????? this.style.background = '#FFF';
??????? }
??????? as[_i].onclick = function() {
??????????? title.innerHTML = this.innerHTML;
??????? }
})(i);
}
方法二:給DOM節(jié)點添加_index屬性,屬性值等于索引
for(var?i=0;i<as.length;i++){
????as[i]._index=i;
????as[i].onclick=function(){
????????as[i].onmouseover = function() {
??????????? this.style.background = '#D0D6D9';
??????? }
??????? as[i].onmouseout = function() {
??????????? this.style.background = '#FFF';
??????? }
??????? as[i].onclick = function() {
??????????? title.innerHTML = this.innerHTML;
??????? }
????}
}??