關(guān)于瀏覽器事件循環(huán)


上代碼

<button id="button" >click</button>
<script>

  let button = document.querySelector("#button");

  button.addEventListener("click", () => {
    Promise.resolve().then(() => console.log("promise1"));
    console.log("click1");
  });
  button.addEventListener("click", () => {
    Promise.resolve().then(() => console.log("promise2"));
    console.log("click2");
  });

  button.click();
</script>

執(zhí)行結(jié)果如下

當(dāng) click 觸發(fā)的事件時(shí)压鉴,會(huì)和點(diǎn)擊的觸發(fā)不相同


image.png

click事件過程

image.png

點(diǎn)擊事件過程

image.png

經(jīng)過一系列排查發(fā)現(xiàn)

由click 和dispatchEvent等DOM 模擬生成的事件是不可信的暇矫,不由瀏覽器調(diào)度秦驯。

https://dom.spec.whatwg.org/#dom-event-istrusted

https://dom.spec.whatwg.org/#dispatch-flag

查閱事件流等文檔個(gè)人得出結(jié)論贡翘,用戶觸發(fā)的可信事件會(huì)由瀏覽器調(diào)度,按照定義事件的順序執(zhí)行呈础,而事件內(nèi)由特定的進(jìn)程驅(qū)動(dòng)毡惜,會(huì)將微任務(wù)放在下一個(gè)事件觸發(fā)之前執(zhí)行。


https://w3c.github.io/uievents/#event-flow

3.3事件可以同步或異步調(diào)度瞬铸。

同步事件(同步事件)被視為先進(jìn)先出模型中的虛擬隊(duì)列批幌,按照相對于其他事件、DOM變化和用戶交互的時(shí)間發(fā)生順序進(jìn)行排序嗓节。此虛擬隊(duì)列中的每個(gè)事件都會(huì)被延遲荧缘,直到前一個(gè)事件完成其傳播行為或被取消。有些同步事件是由特定的設(shè)備或進(jìn)程驅(qū)動(dòng)的拦宣,例如鼠標(biāo)按鈕事件截粗。這些事件由為該組事件定義的事件順序算法控制,用戶代理將按定義的順序調(diào)度這些事件鸵隧。

異步事件(async events)可以在動(dòng)作結(jié)果完成時(shí)調(diào)度绸罗,與其他事件、DOM中的其他更改以及用戶交互無關(guān)豆瘫。

3.4.可信事件
由用戶代理生成的事件从诲,無論是作為用戶交互的結(jié)果,還是作為對DOM進(jìn)行更改的直接結(jié)果靡羡,都由用戶代理信任系洛,用戶代理擁有腳本通過createEvent()方法生成的事件所不具備的權(quán)限,可以使用initEvent()方法進(jìn)行修改略步,也可以通過dispatchEvent()方法進(jìn)行調(diào)度描扯。受信任事件的受信任屬性的值為真,而不受信任事件的受信任屬性值為假趟薄。

除了點(diǎn)擊事件之外绽诚,大多數(shù)不受信任的事件不會(huì)觸發(fā)默認(rèn)操作。此事件始終會(huì)觸發(fā)默認(rèn)操作杭煎,即使isTrusted屬性為false(保留此行為是為了向后兼容)恩够。所有其他不受信任的事件的行為就像對該事件調(diào)用了preventDefault()方法一樣。

而 dom 模擬的事件還是遵循 evenloop 的規(guī)則


image.png
?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請聯(lián)系作者
  • 序言:七十年代末羡铲,一起剝皮案震驚了整個(gè)濱河市蜂桶,隨后出現(xiàn)的幾起案子,更是在濱河造成了極大的恐慌也切,老刑警劉巖扑媚,帶你破解...
    沈念sama閱讀 212,383評論 6 493
  • 序言:濱河連續(xù)發(fā)生了三起死亡事件腰湾,死亡現(xiàn)場離奇詭異,居然都是意外死亡疆股,警方通過查閱死者的電腦和手機(jī)费坊,發(fā)現(xiàn)死者居然都...
    沈念sama閱讀 90,522評論 3 385
  • 文/潘曉璐 我一進(jìn)店門,熙熙樓的掌柜王于貴愁眉苦臉地迎上來旬痹,“玉大人附井,你說我怎么就攤上這事×讲校” “怎么了羡忘?”我有些...
    開封第一講書人閱讀 157,852評論 0 348
  • 文/不壞的土叔 我叫張陵,是天一觀的道長磕昼。 經(jīng)常有香客問我,道長节猿,這世上最難降的妖魔是什么票从? 我笑而不...
    開封第一講書人閱讀 56,621評論 1 284
  • 正文 為了忘掉前任,我火速辦了婚禮滨嘱,結(jié)果婚禮上峰鄙,老公的妹妹穿的比我還像新娘。我一直安慰自己太雨,他們只是感情好吟榴,可當(dāng)我...
    茶點(diǎn)故事閱讀 65,741評論 6 386
  • 文/花漫 我一把揭開白布。 她就那樣靜靜地躺著囊扳,像睡著了一般吩翻。 火紅的嫁衣襯著肌膚如雪。 梳的紋絲不亂的頭發(fā)上锥咸,一...
    開封第一講書人閱讀 49,929評論 1 290
  • 那天狭瞎,我揣著相機(jī)與錄音,去河邊找鬼搏予。 笑死熊锭,一個(gè)胖子當(dāng)著我的面吹牛,可吹牛的內(nèi)容都是我干的雪侥。 我是一名探鬼主播碗殷,決...
    沈念sama閱讀 39,076評論 3 410
  • 文/蒼蘭香墨 我猛地睜開眼,長吁一口氣:“原來是場噩夢啊……” “哼速缨!你這毒婦竟也來了锌妻?” 一聲冷哼從身側(cè)響起,我...
    開封第一講書人閱讀 37,803評論 0 268
  • 序言:老撾萬榮一對情侶失蹤旬牲,失蹤者是張志新(化名)和其女友劉穎从祝,沒想到半個(gè)月后襟己,有當(dāng)?shù)厝嗽跇淞掷锇l(fā)現(xiàn)了一具尸體,經(jīng)...
    沈念sama閱讀 44,265評論 1 303
  • 正文 獨(dú)居荒郊野嶺守林人離奇死亡牍陌,尸身上長有42處帶血的膿包…… 初始之章·張勛 以下內(nèi)容為張勛視角 年9月15日...
    茶點(diǎn)故事閱讀 36,582評論 2 327
  • 正文 我和宋清朗相戀三年擎浴,在試婚紗的時(shí)候發(fā)現(xiàn)自己被綠了。 大學(xué)時(shí)的朋友給我發(fā)了我未婚夫和他白月光在一起吃飯的照片毒涧。...
    茶點(diǎn)故事閱讀 38,716評論 1 341
  • 序言:一個(gè)原本活蹦亂跳的男人離奇死亡贮预,死狀恐怖,靈堂內(nèi)的尸體忽然破棺而出契讲,到底是詐尸還是另有隱情仿吞,我是刑警寧澤,帶...
    沈念sama閱讀 34,395評論 4 333
  • 正文 年R本政府宣布捡偏,位于F島的核電站唤冈,受9級特大地震影響,放射性物質(zhì)發(fā)生泄漏银伟。R本人自食惡果不足惜你虹,卻給世界環(huán)境...
    茶點(diǎn)故事閱讀 40,039評論 3 316
  • 文/蒙蒙 一、第九天 我趴在偏房一處隱蔽的房頂上張望彤避。 院中可真熱鬧傅物,春花似錦、人聲如沸琉预。這莊子的主人今日做“春日...
    開封第一講書人閱讀 30,798評論 0 21
  • 文/蒼蘭香墨 我抬頭看了看天上的太陽圆米。三九已至卒暂,卻和暖如春,著一層夾襖步出監(jiān)牢的瞬間娄帖,已是汗流浹背介却。 一陣腳步聲響...
    開封第一講書人閱讀 32,027評論 1 266
  • 我被黑心中介騙來泰國打工, 沒想到剛下飛機(jī)就差點(diǎn)兒被人妖公主榨干…… 1. 我叫王不留块茁,地道東北人齿坷。 一個(gè)月前我還...
    沈念sama閱讀 46,488評論 2 361
  • 正文 我出身青樓,卻偏偏與公主長得像数焊,于是被迫代替她去往敵國和親永淌。 傳聞我的和親對象是個(gè)殘疾皇子,可洞房花燭夜當(dāng)晚...
    茶點(diǎn)故事閱讀 43,612評論 2 350

推薦閱讀更多精彩內(nèi)容