eventTarget.click() 和 eventTarget.dispatchEvent(new Event("click")) 有什么区别？答案

【问题标题】：What is the difference between eventTarget.click() and eventTarget.dispatchEvent(new Event("click"))?eventTarget.click() 和 eventTarget.dispatchEvent(new Event("click")) 有什么区别？
【发布时间】：2021-04-03 14:38:49
【问题描述】：

当我在控制台中运行这两个代码时， eventTarget.click() 返回 undefined 但实际上单击了目标元素，而 eventTarget.dispatchEvent(new Event("click")) 返回 true 但不单击目标元素。我试图理解，但我无法弄清楚为什么会有两种不同的结果。你能解释一下为什么以及它们是如何不同的吗？他们不是都应该点击页面上的元素吗？

document.getElementById("button").click()

和

document.getElementById("button").dispatchEvent(new Event("click"))

【问题讨论】：

对于.click()，您需要有一个HTMLElement，但对于.dispatchEvent()，您需要一个EventTarget。这就是区别。
请提供minimal reproducible example

标签： javascript dom dom-events

【解决方案1】：

click() 方法用于模拟鼠标点击元素。它触发调用它的元素的单击事件。该事件会冒泡到文档树中更高的元素并触发它们的点击事件。

Event 构造函数用于创建要在任何元素上使用的新事件。可以将‘click’事件传递给 Event 的构造函数来创建点击事件。这个创建的事件有各种属性，可以访问这些属性来自定义事件。

我会建议使用 MouseEvent 而不是 Event。检查下面的例子

document.getElementById('eventTarget').click()
alert('before next')
document.getElementById('eventTarget').dispatchEvent(new MouseEvent("click"))

&lt;input type="button" value="test" id="eventTarget" onclick="alert('clicked');"/&gt;

【讨论】：