Mengapa kaedah klik() html berjalan serentak?

Question

Saya dapati MDN berkata semasa memperkenalkan dispatchEvent() bahawa dispatchEvent()同步运行，但没有找到像MDN或HTML Standard这样的正式文档提到html click()kaedah berjalan serentak atau acara sintetik berjalan serentak. Bolehkah seseorang berkongsi fail yang berkaitan dengan saya? Saya sangat bersyukur!

Atau mungkin terdapat beberapa penjelasan tentang langkah-langkah pelaksanaan dalam dokumentasi dan bukannya kesimpulan langsung? Saya perasan bahawa dispatchEvent() 和 click() 都会将 isTrusted 属性设置为 false，但不确定 eventListener sama ada masa panggilan bergantung pada ini.

Answer 1

Setiap langkah algoritma tidak menyatakan "parallelize", "tugas beratur", atau apa-apa sahaja dalam spesifikasi yang dikaitkan dengan ini akan dilaksanakan secara serentak. *

Apa yang ada dalam algoritma kanonikpenghantaranAcara sasaran sentiasa dilaksanakan secara serentak. Ia datang daripada EventTarget#dispatchEvent()、HTMLElement#click() atau daripada acara yang dimulakan pengguna sebenar.

Mengelirukan, untuk kebanyakan kes, algoritma penjadualan acara ini sendiri dibalut dengan panggilan beratur ke tugas, jadi sebenarnya kejadian acara itu akan menjadi tidak segerak.

Sebagai contoh, apabila imej dimuatkan a> kita ada

Di mana "Tugas Elemen Gilir" akan memanggil algoritma Tugas Giliran kami, dan "Acara Pencetus" akan memanggil >Algoritma Penjadualan kami.

Jadi, ya, dalam kes ini, peristiwa load menyala secara tak segerak selepas pemuatan imej benar-benar berlaku.

---

Sekarang, jika kita kembali ke EventTarget#dispatchEvent()EventTarget#dispatchEvent() （和 HTMLElement#click( ） (dan HTMLElement#click( ), akhirnya sama dengan banyak langkah pembinaan acara), kita dapat lihat bahawa ia memang memanggil algoritma dispatch tanpa beratur sebarang tugas baharu .

Bukan sahaja ia memanggil algoritma secara serentak, malah ia mengembalikan hasil algoritma kepada pemanggil. Oleh itu algoritma tidak boleh diproses secara selari dan pemanggil mesti memanggil semua pengendali serentak untuk mendapatkan hasilnya.

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

^{* Mungkin ada kes lain tetapi saya tidak tahu mengenainya dan jika ia wujud maka ia sudah pasti cukup jelas.}