資訊專欄INFORMATION COLUMN
摘要：前言這是事件機(jī)制系列文章的第二篇對(duì)于合成的理解，咱們就來說說合成這個(gè)名詞。在給注冊(cè)事件的時(shí)候也是對(duì)兼容性做了處理?？偨Y(jié)以上就是我對(duì)于合成這個(gè)名詞的理解，其實(shí)內(nèi)部還處理了很多，我只是略微簡(jiǎn)單的舉了幾個(gè)栗子。
前言
這是react事件機(jī)制系列文章的第二篇-對(duì)于合成的理解，咱們就來說說合成這個(gè)名詞。
剛聽說合成這個(gè)詞時(shí)候，感覺是特別高大上，很有深度，不是很好理解。
當(dāng)我大概的了解過react事件機(jī)制后，略微了解一些皮毛，我覺得合成不單單是事件的合成和處理，從廣義上來說還包括：
1.首先就是對(duì)原生事件的封裝
2.對(duì)某些原生事件的升級(jí)和改造
3.不同瀏覽器事件兼容的處理
1. 對(duì)原生事件的封裝先看一段再熟悉不過的代碼
上面代碼是給一個(gè)元素添加click事件的回調(diào)方法
方法中的參數(shù)e，其實(shí)不是原生事件對(duì)象而是react包裝過的對(duì)象，同時(shí)原生事件對(duì)象被放在了屬性 e.nativeEvent 內(nèi)。
通過調(diào)試，在執(zhí)行棧里看下這個(gè)參數(shù)e包含哪些屬性
![clipboard.p
vhR)
![圖片上傳中...]
看下官方文檔，幫助我們理解下合成事件
SyntheticEvent是react合成事件的基類，定義了合成事件的基礎(chǔ)公共屬性和方法。
react會(huì)根據(jù)當(dāng)前的事件類型來使用不同的合成事件對(duì)象，比如鼠標(biāo)單機(jī)事件 - SyntheticMouseEvent，焦點(diǎn)事件-SyntheticFocusEvent等，但是都是繼承自SyntheticEvent。
2.對(duì)原生事件的升級(jí)和改造對(duì)于有些dom元素事件，我們進(jìn)行事件綁定之后，react并不是只處理你聲明的事件類型，還會(huì)額外的增加一些其他的事件，幫助我們提升交互的體驗(yàn)。
這里就舉一個(gè)例子來說明下：
當(dāng)我們給input聲明個(gè)onChange事件，看下 react幫我們做了什么？
可以看到react不只是注冊(cè)了一個(gè)onchange事件，還注冊(cè)了很多其他事件。
而這個(gè)時(shí)候我們向文本框輸入內(nèi)容的時(shí)候，是可以實(shí)時(shí)的得到內(nèi)容的。
然而原生只注冊(cè)一個(gè)onchange的話，需要在失去焦點(diǎn)的時(shí)候才能觸發(fā)這個(gè)事件。
所以這個(gè)原生事件的缺陷react也幫我們彌補(bǔ)了。
ps：上面紅色箭頭中有一個(gè) invalid事件，這個(gè)并沒有注冊(cè)到document上，而是在具體的元素上。我的理解是這個(gè)是html5新增的一個(gè)事件，當(dāng)輸入的數(shù)據(jù)不符合驗(yàn)證規(guī)則的時(shí)候自動(dòng)觸發(fā)，然而驗(yàn)證規(guī)則和配置都要寫在當(dāng)前input元素上，如果注冊(cè)到document上這個(gè)事件就無效了。
3.瀏覽器事件的兼容處理這個(gè)也算是一個(gè)點(diǎn)吧。react在給document注冊(cè)事件的時(shí)候也是對(duì)兼容性做了處理。
看下代碼
上面這個(gè)代碼其實(shí)就是給document注冊(cè)事件，內(nèi)部其實(shí)也是做了對(duì)ie瀏覽器的兼容。
總結(jié)：以上就是我對(duì)于react合成這個(gè)名詞的理解，其實(shí)react內(nèi)部還處理了很多，我只是略微簡(jiǎn)單的舉了幾個(gè)栗子。
本文算是一個(gè)過度吧，后面開始聊事件注冊(cè)和事件派發(fā)的機(jī)制。走起~
更多精彩內(nèi)容歡迎關(guān)注我的公眾號(hào)-前端張大胖
文章版權(quán)歸作者所有，未經(jīng)允許請(qǐng)勿轉(zhuǎn)載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。
轉(zhuǎn)載請(qǐng)注明本文地址：http://m.hztianpu.com/yun/104427.html
摘要：對(duì)事件機(jī)制的初步理解和驗(yàn)證對(duì)于合成的理解事件注冊(cè)機(jī)制事件執(zhí)行本文基于進(jìn)行分析，雖然不是最新版本但是也不會(huì)影響我們對(duì)事件機(jī)制的整體把握和理解。最后希望通過本文可以讓你對(duì)事件機(jī)制有更清晰的認(rèn)識(shí)和理解。 showImg(https://segmentfault.com/img/bVbtvI3?w=1048&h=550); 前言 寫這個(gè)文章也算是實(shí)現(xiàn)19年的一個(gè) flag，研究一個(gè)知識(shí)點(diǎn)并且把...
摘要：文章涉及到的源碼是基于版本，雖然不是最新版本但是也不會(huì)影響我們對(duì)事件機(jī)制的整體把握和理解?？偨Y(jié)本文主要是從整體流程上介紹了下事件觸發(fā)的過程。 showImg(https://segmentfault.com/img/bVbtvI3?w=1048&h=550); 前言 這是 react 事件機(jī)制的第四節(jié)-事件執(zhí)行，一起研究下在這個(gè)過程中主要經(jīng)過了哪些關(guān)鍵步驟，本文也是react 事件機(jī)制...
摘要：前言這是事件機(jī)制的第一篇，主要內(nèi)容有表象理解，驗(yàn)證，意義和思考。因?yàn)楹铣墒录挠|發(fā)是基于瀏覽器的事件機(jī)制來實(shí)現(xiàn)的，通過冒泡機(jī)制冒泡到最頂層元素，然后再由統(tǒng)一去處理。合成事件的阻止冒泡不會(huì)影響原生事件。 showImg(https://segmentfault.com/img/bVbtvP2?w=800&h=420); 前言 這是 react 事件機(jī)制的第一篇，主要內(nèi)容有：表象理解，驗(yàn)證...
摘要：文章涉及到的源碼是基于版本，雖然不是最新版本但是也不會(huì)影響我們對(duì)事件機(jī)制的整體把握和理解。到這里事件注冊(cè)就完事兒了。 showImg(https://segmentfault.com/img/bVbtvI3?w=1048&h=550); 前言 這是 react 事件機(jī)制的第三節(jié) - 事件注冊(cè)，通過本文你將了解react 事件的注冊(cè)過程，以及在這個(gè)過程中主要經(jīng)過了哪些關(guān)鍵步驟，同時(shí)結(jié)合源...
摘要：二阻止事件冒泡，沒辦法阻止原生事件冒泡。從事件的三個(gè)階段講起，會(huì)略微提及下的事件機(jī)制。就是說注冊(cè)某個(gè)事件，會(huì)強(qiáng)制依賴其他事件。因?yàn)樗惺录际墙壎ㄔ谏系?。劃重點(diǎn)事件合成的過程。派發(fā)的過程實(shí)際上就是遍歷事件隊(duì)列的過程。 react.js事件機(jī)制 寫這篇文章的緣由： 一：在給input綁定事件的時(shí)候，很好奇為何onChange的交互形式竟然和onInput一模一樣。 因?yàn)樵腸hange...
閱讀 3246·2021-11-24 10:22
閱讀 3206·2021-11-23 10:10
閱讀 1559·2021-09-28 09:35
閱讀 1893·2019-08-29 13:16
閱讀 1532·2019-08-26 13:29
閱讀 2930·2019-08-26 10:27
閱讀 809·2019-08-26 10:09
閱讀 1600·2019-08-23 18:05
