EventListener関数に引数を渡す

Question

私は単純な電卓アプリケーションを構築しています。私は3つのことを達成しようとしています：

1. イベントリスナーをボタンに割り当てます。
2. ボタンをクリックすると、イベントが発生します。

3. clickListedボタンの値を表示するには、eventListener関数を使用します。

   for (i = 0; i < btn.length; i++) { 
       var btnVal = btn[i].value; 
       btn[i].addEventListener("click", function() { displayNumber(btnVal) }, false); 
   } 
   
   function displayNumber(param) { 
       displayedNum.innerHTML = param; 
   } 
   

イベントリスナー関数に渡されたときbtnValにアクセスできないようです。

Answer 1

定義イベントリスナー（または他の非同期のもの）のようになります。 btnValいくつかの異なる変数を作成していると思うかもしれませんが、ループを通過するたびに1つずつですが、そうではありません。あなたのコードは次のように振る舞う終わるようbtnValが得ることVARは、トップに掲揚し、再利用：

var btnVal; 
for (i = 0; i < btn.length; i++) { 
    btnVal = btn[i].value; 
    btn[i].addEventListener("click", function() { displayNumber(btnVal) }, false); 
} 

だからあなたのイベントリスナーのすべては非常に同じ変数と対話している、と彼らは最終的にクリックされ得るとき、彼らは」 btnValに割り当てられた最後の値のみが表示されます（btn[btn.length -1].value）。配列の前のすべての値は失われます。

あなたはこの問題に対処することができ、いくつかの方法があります。イベントがオフになったとき

1）むしろ閉鎖変数に依存するよりも、あなたが要素自体からそれを引くことができます。

for (i = 0; i < btn.length; i++) { 
    btn[i].addEventListener("click", function (event) { 
    displayNumber(event.target.value); 
    }); 
} 

2）関数にイベントリスナの作成を移動し、でbtnValを渡す。それが今、関数のパラメータなので、それが新しいバインディングを取得します。

for (i = 0; i < btn.length; i++) { 
    createListener(btn[i], btn[i].value); 
} 

function createListener(element, val) { 
    element.addEventListener("click", function() { displayNumber(val) }, false); 
} 

3）IIFEを使用してインラインで行うことができます。

for (i = 0; i < btn.length; i++) { 
    (function (button) { 
     button.addEventListener("click", function() { displayNumber(button.value) }, false); 
    })(btn[i]); 
} 

EDIT：追加オプション4

4）あなたはES2015を使用することができた場合は、letを使用しています。ブロックスコープを持ちましょう。ループのたびに新しいバインディングを取得します。

for (i = 0; i < btn.length; i++) { 
    let btnVal = btn[i].value; 
    btn[i].addEventListener("click", function() { displayNumber(btnVal) }, false); 
} 

Answer 2

割り当てはそのようには機能しません。代わりに、ターゲットの値を使用してください

for (i = 0; i < btn.length; i++) { 
    btn[i].addEventListener("click", function(e) { 
    displayNumber(e.target.value) 
    }, false); 
} 

Answer 3

イベント内ではbtnValを使用できません。

それはループがトリッキーであるの内側にこの

for (i = 0; i < btn.length; i++) { 
btn[i].addEventListener("click", function(event) { 
    var clickedButton = event.target || event.srcElement; 
    console.log(clickedButton.value) 
}, false); 
}