点击事件处理程序中的`click（）`

Question

Test:

 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> 

I think an exception will be thrown. click() in click event handler dispatches a click event, the click event handler calls click() again, which again dispatches a click event, and so on. But the result is not the same as I thought , it only outputs two 'click'(IE outputs one 'click').

Now change the fire function, create a click event and dispatch it, the result is as expected.

  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> 

My question is why click() behaves differently?

Notice : jQuery is not used, there is nothing to do with jQuery method .click() .

Answer 1

dispatchEvent sends the event synchronously to the target, so when you use dispatchEvent the event handler frames accumulate on the stack and eventually overflow. therefore, printing infinite click and filling your stack (console exception). see documentation

However, when you use .click() a controlled event in javascript. it simulates only one event ie click instead of the continuous sync calls. see documentation for more help.

Answer 2

Your .click() does action associated with it (like following link) bud does not triggers click event > no log function called again, so no repetitive click event executed.

In second version you constantly triggering click event, so your log function is executed infinite times.