点击事件处理程序中的`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'（IE 输出了一次'click'）。

现在改一下fire函数，创建一个click事件并dispatch，结果如预期。

  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 并填充您的堆栈（控制台异常）。见documentation

但是，当您使用 .click() 时，JavaScript 中的受控事件。它只模拟一个事件，即click，而不是连续同步调用。如需更多帮助，请参阅documentation。

Answer 2

您的.click() 执行与它相关的操作（如以下链接）芽不会触发click 事件> 没有再次调用log 函数，因此不会执行重复的点击事件。

在第二个版本中，您不断触发click 事件，因此您的log 函数将无限次执行。