要素にイベントを二重追加する際に問題はありますか？

Question

<form>に.submit()イベントを追加します。同一の.submit()イベントを同じ<form>に複数回追加すると問題はありますか？

明確にするために、<form>を初期化して値を設定し、.submit()イベントを作成する関数があります。 <form>が送信された後、私は<form>を再初期化して再設定する必要があります。簡単な方法はこれを行う同じ関数を呼び出すことですが、同じ<form>に.submit()イベントを作成します - これは本当に必要ではありませんが、どちらもより読みやすいように見える1つの関数を持つことです。

Answer 1

jQueryを使用してハンドラを繰り返し追加すると、繰り返し追加され、イベントが発生したときに繰り返し呼び出されます（ただし、読み込みを続けます）。例：あなたが知っているので

var target = $("#target"); 
 
target.on("click", handler); 
 
target.on("click", handler); 
 
target.on("click", handler); 
 

 
function handler() { 
 
    console.log("handler called"); 
 
}

<div id="target">click me</div> 
 
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

その場合に行う簡単なことは、それを追加するかどうかあなたには、いくつかの方法でにハンドラを追加した要素をマークです：

var form = $("...."); 
if (!form.hasClass("has-handler")) { 
    form.on("submit", handler).addClass("has-handler"); 
} 

---

注：上記はDOMには当てはまりませんが、と同じ機能を使用することを条件とします。

var target = document.getElementById("target"); 
 
target.addEventListener("click", handler, false); 
 
target.addEventListener("click", handler, false); 
 
target.addEventListener("click", handler, false); 
 

 
function handler() { 
 
    console.log("handler called"); 
 
}

<div id="target">click me</div> 
 
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>