建站
咨詢
售后
建站咨詢
新聞中心
本篇內(nèi)容介紹了“react的合成事件是什么”的有關(guān)知識，在實際案例的操作過程中，不少人都會遇到這樣的困境，接下來就讓小編帶領(lǐng)大家學(xué)習(xí)一下如何處理這些情況吧！希望大家仔細閱讀，能夠?qū)W有所成！
犍為網(wǎng)站建設(shè)公司創(chuàng)新互聯(lián),犍為網(wǎng)站設(shè)計制作，有大型網(wǎng)站制作公司豐富經(jīng)驗。已為犍為1000多家提供企業(yè)網(wǎng)站建設(shè)服務(wù)。企業(yè)網(wǎng)站搭建\成都外貿(mào)網(wǎng)站建設(shè)要多少錢，請找那個售后服務(wù)好的犍為做網(wǎng)站的公司定做！
React合成事件是React模擬原生DOM事件所有能力的一個事件對象，即瀏覽器原生事件的跨瀏覽器包裝器；它根據(jù)W3C規(guī)范來定義合成事件，兼容所有瀏覽器，擁有與瀏覽器原生事件相同的接口。在React中，所有事件都是合成的，不是原生DOM事件，但可以通過“e.nativeEvent”屬性獲取DOM事件。
一、合成事件是什么
React基于瀏覽器的事件機制自身實現(xiàn)了一套事件機制，包括事件注冊、事件的合成、事件冒泡、事件派發(fā)等
在React中這套事件機制被稱之為合成事件
合成事件（SyntheticEvent）
React 合成事件（SyntheticEvent）是 React 模擬原生 DOM 事件所有能力的一個事件對象，即瀏覽器原生事件的跨瀏覽器包裝器。它根據(jù) W3C 規(guī)范 來定義合成事件，兼容所有瀏覽器，擁有與瀏覽器原生事件相同的接口。例如
const button = 按鈕
在 React 中，所有事件都是合成的，不是原生 DOM 事件，但可以通過 e.nativeEvent 屬性獲取 DOM 事件。 比如：
const handleClick = (e) => console.log(e.nativeEvent);;
const button = 按鈕
從上面可以看到React事件和原生事件也非常的相似，但也有一定的區(qū)別：
事件名稱命名方式不同
// 原生事件綁定方式
按鈕命名
// React 合成事件綁定方式
const button = 按鈕命名
事件處理函數(shù)書寫不同
// 原生事件 事件處理函數(shù)寫法
按鈕命名
// React 合成事件 事件處理函數(shù)寫法
const button = 按鈕命名
雖然onclick看似綁定到DOM元素上，但實際并不會把事件代理函數(shù)直接綁定到真實的節(jié)點上，而是把所有的事件綁定到結(jié)構(gòu)的最外層，使用一個統(tǒng)一的事件去監(jiān)聽。
這個事件監(jiān)聽器上維持了一個映射來保存所有組件內(nèi)部的事件監(jiān)聽和處理函數(shù)。當(dāng)組件掛載或卸載時，只是在這個統(tǒng)一的事件監(jiān)聽器上插入或刪除一些對象。
當(dāng)事件發(fā)生時，首先被這個統(tǒng)一的事件監(jiān)聽器處理，然后在映射里找到真正的事件處理函數(shù)并調(diào)用。這樣做簡化了事件處理和回收機制，效率也有很大提升。
二、執(zhí)行順序
關(guān)于React合成事件與原生事件執(zhí)行順序，可以看看下面一個例子：
import React from 'react';
class App extends React.Component{
constructor(props) {
super(props);
this.parentRef = React.createRef();
this.childRef = React.createRef();
}
componentDidMount() {
console.log("React componentDidMount！");
this.parentRef.current?.addEventListener("click", () => {
console.log("原生事件：父元素 DOM 事件監(jiān)聽！");
});
this.childRef.current?.addEventListener("click", () => {
console.log("原生事件：子元素 DOM 事件監(jiān)聽！");
});
document.addEventListener("click", (e) => {
console.log("原生事件：document DOM 事件監(jiān)聽！");
});
}
parentClickFun = () => {
console.log("React 事件：父元素事件監(jiān)聽！");
};
childClickFun = () => {
console.log("React 事件：子元素事件監(jiān)聽！");
};
render() {
return (
分析事件執(zhí)行順序
);
}
}
export default App;
輸出順序為：
原生事件：子元素 DOM 事件監(jiān)聽！
原生事件：父元素 DOM 事件監(jiān)聽！
React 事件：子元素事件監(jiān)聽！
React 事件：父元素事件監(jiān)聽！
原生事件：document DOM 事件監(jiān)聽！
可以得出以下結(jié)論：
React 所有事件都掛載在 document 對象上
當(dāng)真實 DOM 元素觸發(fā)事件，會冒泡到 document 對象后，再處理 React 事件
所以會先執(zhí)行原生事件，然后處理 React 事件
最后真正執(zhí)行 document 上掛載的事件
對應(yīng)過程如圖所示：
所以想要阻止不同時間段的冒泡行為，對應(yīng)使用不同的方法，對應(yīng)如下：
阻止合成事件間的冒泡，用e.stopPropagation()
阻止合成事件與最外層 document 上的事件間的冒泡，用e.nativeEvent.stopImmediatePropagation()
阻止合成事件與除最外層document上的原生事件上的冒泡，通過判斷e.target來避免
document.body.addEventListener('click', e => {
if (e.target && e.target.matches('div.code')) {
return;
}
this.setState({ active: false, }); });
“react的合成事件是什么”的內(nèi)容就介紹到這里了，感謝大家的閱讀。如果想了解更多行業(yè)相關(guān)的知識可以關(guān)注創(chuàng)新互聯(lián)網(wǎng)站，小編將為大家輸出更多高質(zhì)量的實用文章！
文章標題：react的合成事件是什么
本文地址：http://www.dlmjj.cn/article/gjdpei.html
