'点击（）'的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获取更多帮助。