38
elemen.addEventListener('click',func,false);
elemen.addEventListener('click',func,false);

funcをクリックすると が 2 回呼び出されるかどうかelemen

はいの場合...同じイベントリスナーが存在するかどうかを確認する解決策はありelemenますか?

4

2 に答える 2

76

funcクリック時に 2 回呼び出されることはありません。しかし、詳細と「落とし穴」については読み続けてください。

addEventListener仕様から:

複数の同一のインスタンスが同じパラメーターで同じEventListenersものに登録されているEventTarget場合、重複するインスタンスは破棄されます。が2回呼び出されることはなく、破棄されるため、メソッドEventListenerで削除する必要はありません。removeEventListener

(私の強調)

次に例を示します。

var target = document.getElementById("target");

target.addEventListener("click", foo, false);
target.addEventListener("click", foo, false);

function foo() {
  var p = document.createElement("p");
  p.innerHTML = "This only appears once per click, but we registered the handler twice.";
  document.body.appendChild(p);
}
<input type="button" id="target" value="Click Me">

ただし、同じことを行う関数だけでなく、同じ関数でなければならないことに注意することが重要です。たとえば、ここでは 4 つの個別の関数を要素に接続しています。これらはすべて呼び出されます。

var target = document.getElementById("target");

var count;
for (count = 0; count < 4; ++count) {
  target.addEventListener("click", function() {
    var p = document.createElement("p");
    p.innerHTML = "This gets repeated.";
    document.body.appendChild(p);
  }, false);
}
<input type="button" id="target" value="Click Me">

これは、ループの反復ごとに(コードは同じでも)異なる関数が作成されるためです。

于 2012-04-28T14:17:27.597 に答える