Pourquoi la méthode click() du HTML s'exécute-t-elle de manière synchrone ?

Question

J'ai découvert que MDN avait déclaré lors de l'introduction de dispatchEvent() que dispatchEvent()同步运行，但没有找到像MDN或HTML Standard这样的正式文档提到html click()les méthodes s'exécutaient de manière synchrone ou que les événements synthétiques s'exécutaient de manière synchrone. Quelqu'un peut-il partager les fichiers concernés avec moi ? Je suis vraiment reconnaissant!

Ou peut-être que certaines étapes de mise en œuvre sont expliquées dans le document au lieu d'arriver directement à la conclusion ? J'ai remarqué que dispatchEvent() 和 click() 都会将 isTrusted 属性设置为 false，但不确定 eventListener si l'heure de l'appel en dépend.

Answer 1

Chaque étape de l'algorithme ne dit pas "paralléliser", "tâches en file d'attente", ou quoi que ce soit dans la spécification liée à celles-ci sera exécuté de manière synchrone. *

Que contient l'algorithme canoniquedispatchL'événement cible est toujours exécuté de manière synchrone. Cela vient de EventTarget#dispatchEvent()、HTMLElement#click() ou d’un événement réel initié par l’utilisateur.

De manière déroutante, dans la plupart des cas, cet algorithme de événement de planification lui-même est enveloppé dans un appel file d'attente à la tâche, donc en réalité l'occurrence de l'événement sera asynchrone.

Par exemple, lorsque l'image se charge a> nous avons

Où "Queue Element Task" appellera notre Queue Task algorithme, et "Trigger Event" appellera notre >Scheduling algorithm.

Donc, oui, dans ce cas, l'événement load se déclenche de manière asynchrone après le chargement de l'image.

---

Maintenant, si nous revenons à EventTarget#dispatchEvent()EventTarget#dispatchEvent() （和 HTMLElement#click( ） (et HTMLElement#click( ), finalement identique à de nombreuses étapes de création d'événements), nous pouvons voir qu'il appelle directement l'algorithme dispatch sans mettre de nouvelles tâches en file d'attente .

Non seulement il appelle l'algorithme de manière synchrone, mais il renvoie même le résultat de l'algorithme à l'appelant. Par conséquent, l'algorithme ne peut pas être traité en parallèle et l'appelant doit appeler tous les gestionnaires de manière synchrone pour obtenir le résultat.

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")));

^{* Peut-être qu'il y a d'autres cas mais je ne les connais pas et s'ils existaient alors ils seraient sûrement assez clairs.}