私は今、この2時間ほど苦労しています。複数の要素にイベントリスナーを追加する
私はページ上のすべての<select>秒にイベントリスナを追加したいと私は、これまでのコードのこの部分を持っている：
onload = function(e) {
sels = document.getElementsByTagName('select');
for(i=0; i<sels.length; i++) {
sels[i].addEventListener('change', alert('test!'), false);
}
}
私は<select>のいずれかの値を変更します。
正しい方向に微調整できますか？ :-)
あなたはあなたの例では、すぐにalert()機能を呼び出すように、そのためにそこに匿名関数を持っている必要があります：
... .addEventListener('change', function() { alert('test!')}, false ...
今undefinedの結果を追加するために、あなたのコードにaddEventListener試行を従っについて（alert()のリターンを関数）。
それとも、ただそのために関数ハンドラを渡すことができます。
function alertMe() {
alert('test!');
}
...
... .addEventListener('change', alertMe, false ...
注：somefunction(arg[, arg...])呼び出しを行うことによって、あなたが機能していない参照が、リターンを機能するものにすることを。
あなたはすぐに警戒（）関数を実行している、あなたはとても、addEventListenerを代わりに機能を機能合格する必要があります。
onload = function(e) {
sels = document.getElementsByTagName('select');
for(i=0; i<sels.length; i++) {
document.getElementsByTagName('select')[i].addEventListener('change', function() { alert('test!'); }, false);
}
}
別に機能にalertを包むから、前述のように、ないではありませんループの反復ごとgetElementsByTagNameを使用します。
onload = function(e) {
sels = document.getElementsByTagName('select');
for(i=0; i<sels.length; i++) {
sels[i].addEventListener('change', function(){alert('test!')}, false);
}
}
あなたは変数に保存されてselect要素のリストを持って、それがget、これらすべてに非効率的な言及しないように、必要はありません要素、各ループ反復。
selectorに一致するすべての要素を繰り返し処理し、eventのイベントリスナーをhandlerに追加しました。
これがそうOPのために、この機能を使用する方法がそうのようになるjQueryの$(selector).on(event, handler)
function addEventListeners(selector, event, handler, useCapture){
useCapture = useCapture || false;
Array.prototype.forEach.call(
document.querySelectorAll(selector)
,function(el, ix) {
el.addEventListener(event, handler, useCapture);
}
);
}
ための同様の機能である：
addEventListeners("select", "change", function(evt){ console.log(evt); });
のための私の答えを参照してください。イベントのバブリングはjavascriptの重要な概念です。したがって、DOMにイベントを直接追加することができれば、コードの一部を保存することができます：
document.addEventListener('change', function(e){
if(e.target.tagName=="SELECT"){
alert('SELECT CHANGED');
}
})
ああ。私はそれを試してみましたが、明らかにそうではありませんでした。ありがとうございました！ 編集：参照してください。今それを言いますと、それは私には意味があります。 –
@Perplexor本当ですか？あなたのコードに別のエラーが表示されていません。 – antyrat
もちろん私は他のいくつかの状況でそれを試しました。それがその時にはうまくいかなかったのです。しかし、今はあなたのソリューションで動作します！ –