为什么事件不会导致无限循环？

Question

var domInner = document.querySelector('#inner')
var domWrapper = document.querySelector('#wrapper')
domInner.onclick = innerHandler
function innerHandler () {
  console.log('inner')
}
domWrapper.onclick = wrapperHandler
function wrapperHandler () {
  // setTimeout(() => {
    console.log('wrapper')
    domInner.click()
  // }, 1000)
}
domInner.click()

<div id="wrapper">
  wrapper
  <div id="inner">
    inner
  </div>
</div>

正如我们所看到的，函数wrapperHandler中的domInner.click()没有触发domInner的click事件。

我曾经认为它会，并且domInner的click事件将传播到domWrapper，因此这可能会导致无限循环。

但事实并非如此。那么，原因是什么？

打开setTimeout后，就会发生这种情况。

为什么函数wrapperHandler中的domInner.click()没有再次触发domInner的click事件？为什么事件不会导致无限循环？

谢谢。

Answer 1

如果您手动点击内部元素，您会注意到它会导致您的日志触发两次。对于实际的点击元素，然后再次为＆＃34;模拟＆＃34;您使用element.click()触发的一个。

为什么它不继续循环？好吧，它看起来像＆＃34;模拟＆＃34;每{@ 3}}次迭代每个元素只能发出一次click。尝试从同一迭代中的同一元素再次发出它将被忽略。将setTimeout放入其中时允许它的原因是因为setTimeout将它放在稍后的事件循环迭代中。

这似乎是element.click方法内置的一个功能，可能具有防止此类无限循环的明确目的。不幸的是，event loop并不是特别详细，而且我不确定在哪里可以挖掘确认。