1

我有这个代码：

var as = document.getElementsByTagName('a');

     for ( var i = as.length; i--; ) {

    as[i].onclick = function(num) {

        return function() {
          console.log(num);
    }; 

    }(i);
}

哪个按预期工作，但是当我添加num到返回函数时，如下所示。它打印出来mouse event。为什么？

var as = document.getElementsByTagName('a');

     for ( var i = as.length; i--; ) {

    as[i].onclick = function(num) {

        return function(num) {  //Adding num here causes issue
          console.log(num);
    }; 

    }(i);
}
4

2 回答 2

3

onclick您正在向事件返回一个函数。该函数是触发事件时调用的函数。

当 JavaScript 调用您的事件函数时，它会将Event对象传递给它。

当您添加num到您所说的位置时//Adding num here causes issue，您正在创建一个新的局部num变量，它会隐藏外部变量（的值i）。

as[i].onclick = function(num) {
    return function(e){
      console.log(e, num);
    }; 
}(i);
于 2013-09-19T15:10:51.557 回答
2

因为你基本上是在分配类似的东西：

function(num) {
    console.log(num);
};

到每个点击事件。但是当一个函数被分配给一个事件时，该函数接受的第一个参数由与该事件对应的事件对象填充。因此，当浏览器查找它时num，console.log(num);它从最内层范围开始——分配为事件处理程序的函数的范围——并找到num指向 click 事件的事件对象，因此这就是控制台显示的内容。

于 2013-09-19T15:13:00.650 回答