資訊專欄INFORMATION COLUMN
摘要：前言這是事件機(jī)制的第一篇，主要內(nèi)容有表象理解，驗(yàn)證，意義和思考。因?yàn)楹铣墒录挠|發(fā)是基于瀏覽器的事件機(jī)制來實(shí)現(xiàn)的，通過冒泡機(jī)制冒泡到最頂層元素，然后再由統(tǒng)一去處理。合成事件的阻止冒泡不會影響原生事件。
前言
這是 react 事件機(jī)制的第一篇，主要內(nèi)容有：表象理解，驗(yàn)證，意義和思考。
表象理解先回顧下 對react 事件機(jī)制基本理解，react 自身實(shí)現(xiàn)了一套自己的事件機(jī)制，包括事件注冊、事件的合成、事件冒泡、事件派發(fā)等，雖然和原生的是兩碼事，但也是基于瀏覽器的事件機(jī)制下完成的。
我們都知道react 的所有事件并沒有綁定到具體的 dom節(jié)點(diǎn)上而是綁定在了document 上，然后由統(tǒng)一的事件處理程序來處理，同時也是基于瀏覽器的事件機(jī)制（冒泡），所有節(jié)點(diǎn)的事件都會在 document 上觸發(fā)。
上面是基于對 react 事件的一個基本的認(rèn)知，那這個認(rèn)知是否正確呢？我們可以通過簡單的方法進(jìn)行驗(yàn)證。
驗(yàn)證驗(yàn)證內(nèi)容：
所有事件均注冊到了元素的最頂層-document 上
節(jié)點(diǎn)的事件由統(tǒng)一的入口處理
為了方便，直接通過 cli 創(chuàng)建一個項目。
代碼如下：
componentDidMount(){
document.getElementById("btn-reactandnative").addEventListener("click", (e) => {
console.log("原生+react 事件: 原生事件執(zhí)行");
});
}
handleNativeAndReact = (e) => {
console.log("原生+react 事件: 當(dāng)前執(zhí)行react事件");
}
handleClick=(e)=>{
console.log("button click");
}
render(){
return react event!!!
react 事件
}
代碼中給兩個 button綁定了合成事件，多帶帶給btn#btn-reactandnative綁定了一個原生的事件。
然后看下chrome 的控制臺，查看元素上的注冊事件。
經(jīng)過簡單的驗(yàn)證，可以看到所有的事件根據(jù)不同的事件類型都綁定在了 document 上。觸發(fā)函數(shù)統(tǒng)一是 dispatchEvent。
試想一下如果一個節(jié)點(diǎn)上同時綁定了合成和原生事件，那么禁止冒泡后執(zhí)行關(guān)系是怎樣的呢？
其實(shí)讀到這里答案已經(jīng)有了。我們現(xiàn)在基于目前的知識去分析下這個關(guān)系。
因?yàn)楹铣墒录挠|發(fā)是基于瀏覽器的事件機(jī)制來實(shí)現(xiàn)的，通過冒泡機(jī)制冒泡到最頂層元素，然后再由dispatchEvent統(tǒng)一去處理。
下面是我得出的結(jié)論：
原生事件阻止冒泡肯定會阻止合成事件的觸發(fā)。
合成事件的阻止冒泡不會影響原生事件。
為什么呢？先回憶下瀏覽器事件機(jī)制
瀏覽器事件的執(zhí)行需要經(jīng)過三個階段，捕獲階段-目標(biāo)元素階段-冒泡階段。
節(jié)點(diǎn)上的原生事件的執(zhí)行是在目標(biāo)階段，然而合成事件的執(zhí)行是在冒泡階段，所以原生事件會先合成事件執(zhí)行，然后再往父節(jié)點(diǎn)冒泡。
既然原生都阻止冒泡了，那合成還執(zhí)行個啥嘞。
好，輪到合成的被阻止冒泡了，那原生會執(zhí)行嗎？
當(dāng)然會了。
因?yàn)樵氖录扔诤铣傻膱?zhí)行，所以合成事件內(nèi)阻止的只是合成的事件冒泡。（代碼我就不貼了）
所以得出結(jié)論：
原生事件（阻止冒泡）會阻止合成事件的執(zhí)行
合成事件（阻止冒泡）不會阻止原生事件的執(zhí)行
兩者最好不要混合使用，避免出現(xiàn)一些奇怪的問題
意義react 自己做這么多的意義是什么？
我的理解的是
1.減少內(nèi)存消耗，提升性能，不需要注冊那么多的事件了，一種事件類型只在 document 上注冊一次
2.統(tǒng)一規(guī)范，解決 ie 事件兼容問題，簡化事件邏輯
3.對開發(fā)者友好
思考既然 react 幫我們做了這么多事兒，那他的背后的機(jī)制是什么樣的呢？
事件怎么注冊的，事件怎么觸發(fā)的，冒泡機(jī)制怎樣實(shí)現(xiàn)的呢？
請看后續(xù)文章.....
更多精彩內(nèi)容歡迎關(guān)注我的公眾號-前端張大胖
文章版權(quán)歸作者所有，未經(jīng)允許請勿轉(zhuǎn)載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。
轉(zhuǎn)載請注明本文地址：http://m.hztianpu.com/yun/104426.html
摘要：對事件機(jī)制的初步理解和驗(yàn)證對于合成的理解事件注冊機(jī)制事件執(zhí)行本文基于進(jìn)行分析，雖然不是最新版本但是也不會影響我們對事件機(jī)制的整體把握和理解。最后希望通過本文可以讓你對事件機(jī)制有更清晰的認(rèn)識和理解。 showImg(https://segmentfault.com/img/bVbtvI3?w=1048&h=550); 前言 寫這個文章也算是實(shí)現(xiàn)19年的一個 flag，研究一個知識點(diǎn)并且把...
摘要：前言這是事件機(jī)制系列文章的第二篇對于合成的理解，咱們就來說說合成這個名詞。在給注冊事件的時候也是對兼容性做了處理?？偨Y(jié)以上就是我對于合成這個名詞的理解，其實(shí)內(nèi)部還處理了很多，我只是略微簡單的舉了幾個栗子。 showImg(https://segmentfault.com/img/bVbtvI3?w=1048&h=550); 前言 這是react事件機(jī)制系列文章的第二篇-對于合成的理解，...
摘要：文章涉及到的源碼是基于版本，雖然不是最新版本但是也不會影響我們對事件機(jī)制的整體把握和理解。到這里事件注冊就完事兒了。 showImg(https://segmentfault.com/img/bVbtvI3?w=1048&h=550); 前言 這是 react 事件機(jī)制的第三節(jié) - 事件注冊，通過本文你將了解react 事件的注冊過程，以及在這個過程中主要經(jīng)過了哪些關(guān)鍵步驟，同時結(jié)合源...
摘要：文章涉及到的源碼是基于版本，雖然不是最新版本但是也不會影響我們對事件機(jī)制的整體把握和理解。總結(jié)本文主要是從整體流程上介紹了下事件觸發(fā)的過程。 showImg(https://segmentfault.com/img/bVbtvI3?w=1048&h=550); 前言 這是 react 事件機(jī)制的第四節(jié)-事件執(zhí)行，一起研究下在這個過程中主要經(jīng)過了哪些關(guān)鍵步驟，本文也是react 事件機(jī)制...
摘要：整理收藏一些優(yōu)秀的文章及大佬博客留著慢慢學(xué)習(xí)原文協(xié)作規(guī)范中文技術(shù)文檔協(xié)作規(guī)范阮一峰編程風(fēng)格凹凸實(shí)驗(yàn)室前端代碼規(guī)范風(fēng)格指南這一次，徹底弄懂執(zhí)行機(jī)制一次弄懂徹底解決此類面試問題瀏覽器與的事件循環(huán)有何區(qū)別筆試題事件循環(huán)機(jī)制異步編程理解的異步 better-learning 整理收藏一些優(yōu)秀的文章及大佬博客留著慢慢學(xué)習(xí) 原文:https://www.ahwgs.cn/youxiuwenzhan...
閱讀 2446·2021-11-18 10:07
閱讀 2393·2021-09-22 15:59
閱讀 3150·2021-08-23 09:42
閱讀 2363·2019-08-30 15:44
閱讀 1251·2019-08-29 15:06
閱讀 2420·2019-08-29 13:27
閱讀 1290·2019-08-29 13:21
閱讀 1510·2019-08-29 13:13
