Question

我有这段代码：

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);
}

Answer 1

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

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

当您将num添加到您说//Adding num here causes issue的位置时，您正在创建一个新的本地num变量，该变量会遮蔽外部变量（i的值）。< / p>

as[i].onclick = function(num) {
    return function(e){
      console.log(e, num);
    }; 
}(i);

Answer 2

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

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

每次点击活动。但是，当将一个函数分配给一个事件时，该函数接受的第一个参数将由与该事件对应的事件对象填充。因此，当浏览器查找num console.log(num);时，它从最里面的范围开始 - 指定为事件处理程序的函数 - 并发现num指向事件对象以进行单击事件，因此这是控制台显示的内容。

Javascript关闭 - 鼠标事件

2 个答案: