addEventListenerで渡されたリスナー関数に引数を渡すにはどうすればよいですか？

Question

anItem.addEventListener("click", iRespond, false); 

問題は、iRespondは多くのアイテムのクリックを処理するため、アイテム間を区別する方法が必要なため、iRespondに引数を渡す必要があります。

どうすればいいですか？

Answer 1

シンプル閉鎖：

var foo = "bar"; 
e.addEventListener('whee',function(evt){ 
    iRespond(evt,foo); 
},false); 

（あなたが変更だ変数にラッチしているので、そのようなループのように、）簡単な閉鎖はしないだろうあなたは、その値の上に新しいクロージャを作成する必要があります：たとえば

foo.addEventListener('bar',(function(jim){ 
    return function(evt){ 
    iRespond(evt,jim); // Surprise surprise, jim is available here! 
    } 
})(someValueToBeNamedJim), false); 

：

あなたが名前を付けるために選択することができます

var buttons = document.querySelectorAll('button'); 
for (var i=buttons.length;i--;)} 
    buttons[i].addEventListener('click',(function(j){ 
    return function(){ alert("You clicked on button #"+j); }; 
    })(i),false); 
} 

機能の内部と外部の両方で同じ変数を使用してください。— jの代わりにiを使用してください。—ですが、混乱するかもしれません。

Answer 2

多くの可能性があります。いいえ、それのための閉鎖を作成しています。 bind()も使用できます。

より良い解決策は、イベントのtargetプロパティによってオプション（項目ごと）を区別することです（リスナーにも渡されます）。これは、多くのアイテムに対して1つのハンドラしか使用していない場合、非常にエレガントになります。 <li>要素ごとに1つではなく<ul>に追加してください。次に、対象要素のIDまたはデータ属性によって、何をするかを選択します。

Answer 3

誰もが最も簡単な解決法を提供しているようです。

anItem.addEventListener("click", function() { 
    iRespond(your arg here); 
}, false); 

あるいは、多くの場合、あなたはちょうどあなたがから呼び出されたオブジェクトのものを見るためにイベントリスナーにthisポインタを参照することができます：

anItem.addEventListener("click", iRespond, false); 

あなたの他の関数呼び出しは、このような無名関数に入れて iRespondで

そして、：

function iRespond() { 
    // this points to the item that caused the event so you can 
    // determine which one you are processing and then act accordingly 
    // For example, this.id is the id of the object 
}