javascript 有没有提到为什么html click()方法是同步运行的?

f4t66c6m  于 2023-03-06  发布在  Java
关注(0)|答案(1)|浏览(110)

我发现MDN在介绍dispatchEvent()的时候说dispatchEvent()同步运行,但是没有发现像MDN或者HTML Standard这样的正式文档提到html click()方法同步运行或者synthetic event同步运行,有没有人能分享一下相关文档,我会非常感谢的!
或者文档中的一些执行步骤解释了它而不是直接得出结论?我注意到dispatchEvent()和click()都将isTrusted属性设置为false,但不确定eventListener调用时间是否取决于此。

rekjcdws

rekjcdws1#

规范中没有提到"并行"、"任务排队"或任何与之相关的算法步骤都将同步执行。
规范算法中的内容dispatch一个事件到target * 总是同步执行的。它来自EventTarget#dispatchEvent()HTMLElement#click(),或者来自一个实际的用户发起的事件。
令人困惑的是,在 * 大多数 * 情况下,这个 * 调度事件 * 算法本身被 Package 在一个 * 队列任务 * 调用中,所以在事件发生后激发事件的整个操作实际上是异步的。
例如,我们有when an image loads
1.在给定img元素的DOM操作任务源上排队元素任务,步骤如下:
1.如果设置了重新启动动画,则重新启动动画。
1.将当前请求的当前URL设置为urlString。
1.在img元素处激发名为load的事件。
其中,
"queue an element task"* 将调用我们的 * queue a task * 算法,"Fire an event" 将调用我们的 * dispatch * 算法。
因此,在这种情况下,load事件是在映像加载实际发生之后异步触发的。
现在,如果我们回到EventTarget#dispatchEvent()(和HTMLElement#click(),它们归结起来都有很多事件构建步骤),我们可以看到它确实直接调用了 * dispatch * 算法,而没有对任何新任务进行排队。
dispatchEvent(event)方法步骤为:
1.如果设置了事件的调度标志,或者未设置其初始化标志,则引发"InvalidStateError"DOMException
1.将事件的isTrusted属性初始化为false。
1.将调度事件的结果返回到此。
它不仅同步地调用这个算法,它甚至把那个算法的结果返回给调用者,所以这个算法不可能被并行处理,调用者必须同步地得到调用所有处理程序的结果。

const makeEvent = (type) => new Event(type, { cancelable: true });
addEventListener("foo", (evt) => {
  console.log("foo fired");
});
console.log("return value", dispatchEvent(makeEvent("foo")));

addEventListener("bar", (evt) => {
  console.log("bar fired");
  evt.preventDefault(); // cancel the event
});
console.log("return value", dispatchEvent(makeEvent("bar")));
  • 也许还有其他的例子,但我不知道这些,如果它们存在,它们肯定是足够清楚的。

相关问题