为什么在单击事件侦听器内触发 click() 不会导致无限循环？

Question

有人可以解释一下这段 JavaScript 代码的程序流程：

const $leaveRoom = document.querySelector('#leave-button');
let a = 1;
$leaveRoom.addEventListener('click', () => {
  console.log(a);
  console.log("check");
  a++;
  $leaveRoom.click();
  console.log(a);
  a++;
});

<button id="leave-button">Leave Room</button>

The Output was:
1
check
2
check
3
4

这个问题可能听起来很愚蠢，但我是 JavaScript 的新手。我无法理解这段代码的程序流程。我想知道我是如何在输出中得到 3 & 4 的。

Answer 1

这个问题的关键是每个方法上都有一个隐藏的标志element.click()。

每个元素都有一个关联的点击进行中标志，该标志最初未设置。

文档：https : //html.spec.whatwg.org/multipage/interaction.html#dom-click

一旦这个方法被激活，这个标志就会从progess Status == unset到progess Status == active （伪代码）

（然后一旦它包含的代码被完全执行，它就会返回到它的初始状态）

当此标志处于该active状态时，将忽略对该方法的任何调用。

这是我原来的帖子，展示了`console.log()`的执行顺序

const bt_leaveRoom = document.querySelector('#leave-button')
var counter = 0
var origin  = 'event clic'

bt_leaveRoom.addEventListener('click', () => 
  {
  let source = origin
  console.log(`_first console.log(): counter = ${ ++counter }, origin = ${source}`)

  origin = 'call'
  bt_leaveRoom.click()
  
  console.log(`second console.log(): counter = ${ ++counter }, origin = ${source}`)
  })

<button id="leave-button">Leave Room</button>

如果我以这种方式编码，则隐藏标志的行为方式相同：
将此行替换
bt_leaveRoom.click()
为：
if (source !== 'call') bt_leaveRoom.click()

但实际上系统使用了隐藏标志（名为progress flag？）的方法
，它可以（在伪代码中）

if (progress_flag_of_bt_leaveRoom.click() is unset) do { bt_leaveRoom.click() }  

Answer 2

我尝试了几件事来找到这个问题的答案。对于这里发生的事情，我还没有真正找到明确的答案，但我相信我在这里分享的内容可以解决这个极好的问题。

我简化了代码以专注于事件的递归触发。

简化代码

const $leaveRoom = document.querySelector('#leave-button');
let a = 1;
$leaveRoom.addEventListener('click', () => {
    console.log(a++);
    $leaveRoom.click();
});

<button id="leave-button">Leave Room</button>

我们在这里可以看到，我们有两次调用console.log，第一个是实际点击按钮，第二个是调用$leaveRoom.click();。它似乎出于某种原因停在那里。

使用 dispatchEvent

const $leaveRoom = document.querySelector('#leave-button');
let a = 1;
$leaveRoom.addEventListener('click', () => {
    console.log(a++);
    $leaveRoom.dispatchEvent(new Event('click'));
});

<button id="leave-button">Leave Room</button>

在这里，该事件被多次触发（对我来说是 44 次），这可能是由于您的机器有多快。不过它似乎最终会停止触发，所以我认为这里也会发生同样的现象。

使用 setTimeout

const $leaveRoom = document.querySelector('#leave-button');
let a = 1;
$leaveRoom.addEventListener('click', () => {
    console.log(a++);
    setTimeout(() => { $leaveRoom.click(); });
});

<button id="leave-button">Leave Room</button>

如果你正在寻找一种无限触发点击事件的方法，不管前面的方法为什么会失败。这似乎确实可以解决问题。

说了这么多，我仍然不知道这个隐藏的力量会阻止之前方法的递归。也许有人可以对此有所了解。