web-dev-qa-db-ja.com

複数の要素へのイベントリスナーの追加

私はこれにかなりの時間を費やしてきました。

ページ上のすべての<select>sにイベントリスナーを追加したいのですが、これまでに次のコードを用意しています。

onload = function(e) {
    sels = document.getElementsByTagName('select');
    for(i=0; i<sels.length; i++) {
        sels[i].addEventListener('change', alert('test!'), false);
    }
}

これは、ページが読み込まれたときにのみアラートをトリガーし、<select>sのいずれかの値を変更したときにトリガーしません。

正しい方向にナッジを取得できますか？ :-)

javascriptaddeventlistener
11
Christian Lundahl

あなたの例ではalert()関数をすぐに呼び出すので、そのための無名関数が必要です。

_ ... .addEventListener('change', function() { alert('test!')}, false ...
_

今のところ、あなたのコードによれば、addEventListenerはundefined（alert()関数の戻り）の結果を追加しようとします。

または、そのための関数ハンドラを渡すことができます：

_function alertMe() {
    alert( 'test!' );
}
...

... .addEventListener('change', alertMe, false ...
_

注：somefunction(arg[, arg...])を呼び出すことにより、関数ではなく、関数が返すものを参照することに注意してください。

9
antyrat

前述のように、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するのは効率的ではないことは言うまでもありません。

6
Cerbrus

selectorに一致するすべての要素を反復処理する次の単純な関数を作成し、渡されたeventを使用してhandlerのイベントリスナーを追加します。

これは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);
        }
    );
}

OPの場合、この関数の使用方法は次のようになります。

addEventListeners("select", "change", function(evt){ console.log(evt); });

私の回答も参照してください 現在および将来の要素のイベントリスナー

1
isapir

Alert（）関数をすぐに実行しているため、代わりに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);
    }
}
0
Will C.

イベントバブリングはJavaScriptの重要な概念であるため、DOMに直接イベントを追加できる場合は、いくつかのコード行を保存できます。

document.addEventListener('change', function(e){
  if(e.target.tagName=="SELECT"){
   alert('SELECT CHANGED');
  }
})
0
Ayush Sharma