11

私はこれに数時間苦労してきました。

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

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

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

正しい方向にナッジしてもらえますか？:-)

4

6 に答える 6

9

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

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

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

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

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

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

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

于 2012-12-17T14:09:14.473 に答える
6

前述のように、を関数でラップすることを除いて、ループのすべての反復に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

于 2012-12-17T14:17:29.433 に答える
1

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

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

現在および将来の要素については、イベントリスナーに関する私の回答も参照してください。

于 2017-08-16T03:47:37.000 に答える
0

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);
    }
}
于 2012-12-17T14:10:55.413 に答える
0

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

document.addEventListener('change', function(e){
  if(e.target.tagName=="SELECT"){
   alert('SELECT CHANGED');
  }
})
于 2018-01-10T12:12:38.863 に答える
0

私は常に委任をお勧めします-入力が同じコンテナにある場合は、これを行うことができます

window.addEventListener("load", function() { // on page load
  document  // or a closer static container
    .addEventListener("input", function(e) { // input or change
    const tgt = e.target;
    if (tgt.tagName === "SELECT") {
      const id = tgt.id;
      console.log("You changed", id)
    }
  });
});
<div id="inputContainer">
  <h1>Change the select</h1>
  <select id="sel1">
    <option value="">Please select</option>
    <option value="1">One</option>
    <option value="2">Two</option>
  </select>
  <select id="sel2">
    <option value="">Please select</option>
    <option value="1">One</option>
    <option value="2">Two</option>
  </select>
</div>

于 2021-08-30T13:24:41.363 に答える