'點擊（）'的click事件處理

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()，再次分派點擊事件，依此類推。但結果與我想的不一樣，只輸出兩次'點擊'（IE輸出一次'點擊'）。

現在更改fire函數，創建一個click事件並分派它，結果如預期。

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()行爲有所不同？

注意事項：沒有使用jQuery，與jQuery方法.click()無關。

Answer 1

你的.click()做了與之相關的動作（如下面的鏈接）bud並沒有觸發click event> no log函數再次被調用，所以沒有執行重複的點擊事件。

在第二個版本中，你經常觸發click事件，所以你的log函數執行無限次。

Answer 2

dispatchEvent將事件同步發送到目標，所以當您使用dispatchEvent時，事件處理程序幀在堆棧上累積並最終溢出。因此，打印無限click並填充您的堆棧（控制檯異常）。請參閱documentation

但是，當您在javascript中使用.click（）受控事件時。它僅模擬一個事件，即click而不是連續同步呼叫。請參閱documentation獲取更多幫助。