javascript onclick 事件未正确触发

Question

我将这个点击事件附加到每个按钮，当我点击每个按钮时，它正在打印第三个按钮的输出。 我不确定发生了什么。

<!DOCTYPE html>
<html>
<head>
  <title>JS Bin</title>
</head>
<body>
  <button>test1</button>
  <button>test2</button>
  <button>test3</button>
</body>
<script>
   var nodes = document.getElementsByTagName('button');
   for (var i = 0; i < nodes.length; i++) {
       nodes[i].addEventListener('click', function() {
       console.log('You clicked element #' + i);
   });
   }
</script>
</html>

当我点击任何按钮时，它正在打印

"You clicked element #3"

Answer 1

对此的简单解决方案：

<!DOCTYPE html>
<html>

<head>
    <title>JS Bin</title>
</head>

<body>
    <button>test1</button>
    <button>test2</button>
    <button>test3</button>
</body>
<script>
    var nodes = document.getElementsByTagName('button');
    console.log(nodes);
    for (var i = 0; i < nodes.length; i++) {
        //converted click function into an IIFE so it executes then and there only
        nodes[i].addEventListener('click', (function (j) {
            return function () {
                console.log('You clicked element #' + j);
            }

        })(i));
    }
</script>

</html>

你应该通过两个概念来理解这个东西

1) 关闭

2) Javascript 是单线程和同步的。 那么它是如何处理事件的呢？

这是您的代码中发生的事情：

==> for 循环同步执行，因为它是 javascript 引擎 post 的一部分，javascript 处理事件队列，这是一个 FIFO（先进先出）

==> 当 for 循环结束时 i 的值为 3，它会保留在内存中，直到它内部的函数执行

==> 每次取值 3 并打印它。

Answer 2

这是循环问题中的函数闭包。

循环内的 JavaScript 闭包——简单实用的例子

小心这个！

旁注：围绕这个问题的问题在面试中经常被问到，以证明对 JS 的熟练程度。

Answer 3

当这个button正在监听事件时，此时i的值是nodes.length -1 即2 。 因为循环已经完成它的执行并将i值设置为 2。

所以它是安慰You clicked element #3 。

由于scope和closure出现此类问题

创建一个IIFE并传递i的值。

希望这个片段会有用

  var nodes = document.getElementsByTagName('button');
   for (var i = 0; i < nodes.length; i++) {
   (function(i){
   nodes[i].addEventListener('click', function() {
       console.log('You clicked element #' + i);
   });
}(i))

   }

检查这个jsfiddle

Answer 4

这是使用 jQuery 的另一种方式。

$("button").each(function(e) {
    $(this).data("number", e);
}).bind("click", function(e) {
    console.log("You clicked element #" + $(this).data("number"));
});

https://jsfiddle.net/ChaHyukIm/uxsqu70t/3/

javascript onclick 事件未正确触发

问题描述

4 个解决方案

解决方案1
3 已采纳 2016-05-29 05:11:16

解决方案2
1 2016-05-28 05:53:06

解决方案3
1 2016-05-28 05:57:51

解决方案4
1 2016-05-28 10:18:07

javascript onclick 事件未正确触发

问题描述

4 个解决方案

解决方案1 3 已采纳 2016-05-29 05:11:16

解决方案2 1 2016-05-28 05:53:06

解决方案3 1 2016-05-28 05:57:51

解决方案4 1 2016-05-28 10:18:07

解决方案1
3 已采纳 2016-05-29 05:11:16

解决方案2
1 2016-05-28 05:53:06

解决方案3
1 2016-05-28 05:57:51

解决方案4
1 2016-05-28 10:18:07