JS関数内のJQuery関数がますます実行される

Question

JavaScript関数内のjQuery関数がクリックされるたびにますます消えてしまうのはなぜですか？ワンクリックで100回以上実行されるのに十分な時間をクリックしました。

<div class="clickity" onclick="funky()">Test</div> 

var x = 0; 

function funky(){ 
    $('.clickity').on('click', function(){ 
     x += 1; 
     alert(x); 
    }); 
}; 

JsFiddleなぜこのように動作するのか不思議です。

Answer 1

clickityをクリックするたびに、funkyメソッドが呼び出され、clickityに新しいイベントリスナーが登録されるためです。あなたは、2つのメソッドを混合、いずれかを実行している：

var x = 0; 
 

 
function funky(){ 
 
    x += 1; 
 
alert(x); 
 
};

<div class="clickity" onclick="funky()">Test</div>

または

var x = 0; 
 

 
$('.clickity').on('click', function(){ 
 
    x += 1; 
 
alert(x); 
 
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<div class="clickity" >Test</div>

Answer 2

機能でリスナーを挿入し、なぜ私は、理解していません？ボタンをクリックするたびに新しいリスナーを追加します。クリックするたびにインクリメントが実行され、新しいリスナが追加されます。

Answer 3

addEventListenera.k.a. onのjQueryには、累積的な側面があります。古いものを置き換えて新しいものを追加し、以前のハンドラチェーンを維持することによって、それを割り当てません。

Answer 4

クラスJavascript Onclick HTML属性とjqueryを組み合わせています。

まずラウンド

1. ユーザーがclickity
2. クリックします。 HTML属性onclickのためにファンキーが呼び出されます
3. ファンキーはリスナーをクリックして添付します。
4. noteこの最初のクリックでファンキーはxを増加させていません。

次のラウンド

1. ユーザがclickity
2. クリックします。 HTML属性onclickのためにファンキーが呼び出される
3. b。 Xは
4. ファンキーが

未来clicketyするリスナーを取り付ける最初のラウンドで取り付けclicketyするためjQueryのイベントリスナーの1だけインクリメントされ

1. ユーザがclickity
2. クリック丸め。 HTML属性onclickのためにファンキーが呼び出される
3. b。 jqueryイベントリスナーが最初のラウンドで添付されたので、xは1だけインクリメントされます。
4. c。Xは
5. ファンキーは `のonclick = "）（ファンキー" を削除`と `$（アンラップ