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

Question

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

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

和

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

Answer 1

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

\n

Event 构造函数用于创建要在任何元素上使用的新事件。\xe2\x80\x98click\xe2\x80\x99 事件可以传递给Event的构造函数来创建点击事件。创建的事件具有各种属性，可以访问这些属性来自定义事件。

\n

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

\n

\r\n

\r\n

document.getElementById(\'eventTarget\').click()\nalert(\'before next\')\ndocument.getElementById(\'eventTarget\').dispatchEvent(new MouseEvent("click"))

\r\n

<input type="button" value="test" id="eventTarget" onclick="alert(\'clicked\');"/>

\r\n

\r\n

\r\n

\n