點擊事件處理程序中的`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()調度一個click事件，單擊事件處理程序再次調用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

dispatchEvent將事件同步發送到目標，因此，當您使用dispatchEvent ，事件處理程序框架會累積在堆棧上，並最終溢出。 因此，打印無限click並填充堆棧（控制台例外）。 請參閱文件

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

Answer 2

您的.click()執行與其關聯的操作（如以下鏈接），不會觸發click事件>沒有再次調用log功能，因此不會執行重復的點擊事件。

在第二個版本中，您會不斷觸發click事件，因此您的log功能會無限次執行。