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

Question

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

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

和

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

标签： javascriptdomdom-events

Answer 1

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

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

我会建议使用 MouseEvent 而不是 Event。检查以下示例

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

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