`クリック（）`クリックイベントハンドラ

Question

テスト中：

var btn = document.querySelector('button') 
 
btn.addEventListener('click', log) 
 

 
function log(event) { 
 
    var p = document.createElement('p') 
 
    p.textContent = event.type 
 
    document.body.appendChild(p) 
 
    fire() 
 
} 
 

 
function fire() { 
 
    btn.click() 
 
}

<button type="button">Click me</button>

私は、例外がスローされますと思います。 Clickイベントハンドラのclick()はclickイベントを送出し、clickイベントハンドラはclick()を再度呼び出し、clickイベントを再度送出します。しかし、結果は私が思ったのと同じではなく、2つの「クリック」（IE出力の「クリック」）を出力するだけです。

fire関数を変更して、クリックイベントを作成して送出すると、結果は期待通りです。

var btn = document.querySelector('button') 
 
    btn.addEventListener('click', log) 
 

 
    function log(event) { 
 
    var p = document.createElement('p') 
 
    p.textContent = event.type 
 
    document.body.appendChild(p) 
 
    fire() 
 
    } 
 

 
    function fire() { 
 
    var event = new MouseEvent('click') 
 
    btn.dispatchEvent(event) 
 
    }

<button type="button">Click me</button>

click()は異なった動作を、なぜ私の質問はありますか？

Notice：jQueryは使用されていません.jQueryメソッド.click()とは関係ありません。

Answer 1

.click()あなたの.click()に関連付けられたアクション（次のリンクのような）は、clickイベントを起動しません。log関数が再度呼び出されるため、繰り返しのクリックイベントは実行されません。

第2バージョンでは、常にclickイベントをトリガーするので、log関数は無限に実行されます。

Answer 2

dispatchEventは、イベントをターゲットに同期して送信するため、dispatchEventを使用すると、イベントハンドラフレームがスタックに蓄積し、最終的にオーバーフローします。したがって、無限印刷clickとスタック（コンソール例外）を埋める。 documentation

ただし、.click（）を使用するとJavaScriptで制御されたイベントが発生します。連続同期呼び出しの代わりに1つのイベント、すなわちclickをシミュレートします。詳細については、documentationを参照してください。