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