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事件，依此类推。但结果与我想的不一样，它只输出两个'click'（IE输出一个'click'）。

现在更改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()表现不同？

注意：未使用jQuery，与jQuery方法.click()无关。

Answer 1

dispatchEvent将事件同步发送到目标，因此当您使用dispatchEvent时，事件处理程序帧会在堆栈上累积并最终溢出。因此，打印无限click并填充堆栈（控制台异常）。见documentation

但是，当您在javascript中使用.click（）受控事件时。它只模拟一个事件，即click而不是连续同步调用。请参阅documentation以获取更多帮助。

Answer 2

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

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

单击事件处理程序中的“click（）”

2 个答案: