elemen.addEventListener('click',func,false);
elemen.addEventListener('click',func,false);
func
をクリックすると が 2 回呼び出されるかどうかelemen
。
はいの場合...同じイベントリスナーが存在するかどうかを確認する解決策はありelemen
ますか?
elemen.addEventListener('click',func,false);
elemen.addEventListener('click',func,false);
func
をクリックすると が 2 回呼び出されるかどうかelemen
。
はいの場合...同じイベントリスナーが存在するかどうかを確認する解決策はありelemen
ますか?
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">
これは、ループの反復ごとに(コードは同じでも)異なる関数が作成されるためです。