Question

我正在开发一个非常简单的应用程序。当用户将鼠标悬停在任何列表项（li）上时，文本颜色会变为绿色，当鼠标移出时，它会变回黑色。

为什么我们不能在匿名函数内的以下代码中使用lis[i]而不是this关键字？

var lis = document.querySelectorAll('li');
var i = 0;
for(; i < lis.length; i++){

    lis[i].addEventListener('mouseover', function(){

    this.style.color = 'green';

    });
    lis[i].addEventListener('mouseout', function(){

    this.style.color ="black";  
    });
};

Answer 1

当执行回调函数时，由于循环，i变量的值为lis.length，导致lis[i]的值为undefined

您可以使用forEach功能代替。

＆＃13;

var lis = document.querySelectorAll('li');
lis.forEach(function (li) {
  li.addEventListener('mouseover', function (){
    li.style.color = 'green';
  });
  li.addEventListener('mouseout', function (){
    li.style.color ="black";  
  });
});

＆＃13;

<ul>
  <li>First LI</li>
  <li>Second LI</li>
</ul>

＆＃13;

Answer 2

在调用函数时，循环将完成。只有一个i变量，该函数始终可以看到其当前值。因此，如果您在函数内部使用lis.length，则会看到值const lis = document.querySelectorAll('li'); for(let i = 0; i < lis.length; i++){ lis[i].addEventListener('mouseover', () => lis[i].style.color = 'green'); lis[i].addEventListener('mouseout', () => lis[i].style.color ="black"); };。

有很多方法可以解决它。如果您可以使用ES2015（可能通过转换器），那么您可以写：

现在你每次循环都有不同的i。

或者在较旧的代码中，您可以将循环体推送到另一个函数并将var lis = document.querySelectorAll('li'); var _loop = function _loop(i) { lis[i].addEventListener('mouseover', function () { return lis[i].style.color = 'green'; }); lis[i].addEventListener('mouseout', function () { return lis[i].style.color = "black"; }); }; for (var i = 0; i < lis.length; i++) { _loop(i); }作为参数传递。这与为每个事件绑定不同变量具有相同的效果：

special_days

（这是我在上面给出的ES2015示例中自动生成的代码）

Answer 3

你可以使用＆＃34; e.srcElement＆＃34;像这样获得目前的目标

＆＃13;

let lis = document.querySelectorAll('li');

for (let i = 0; i < lis.length; i++) {
  lis[i].addEventListener('mouseover', function(e){
    e.srcElement.style.color = 'green';
  })
  lis[i].addEventListener('mouseout', function(e){
    e.srcElement.style.color = 'black';
  })
}

＆＃13;

<ul>
  <li>First LI</li>
  <li>Second LI</li>
</ul>

＆＃13;

匿名函数作为参数的范围

3 个答案: