Heim > Artikel > Web-Frontend > Wie man die synthetischen Ereignisse von React beschreibt
React Synthetic Event ist ein Ereignisobjekt, das alle Funktionen nativer DOM-Ereignisse in React simuliert, d. h. ein browserübergreifender Wrapper für browsernative Ereignisse. Es definiert synthetische Ereignisse gemäß W3C-Spezifikationen und ist mit allen Browsern kompatibel verfügt über die gleichen Funktionen wie native Browser-Ereignisse. Gleiche Schnittstelle. In React sind alle Ereignisse synthetische und keine nativen DOM-Ereignisse, aber DOM-Ereignisse können über die Eigenschaft „e.nativeEvent“ abgerufen werden.
Die Betriebsumgebung dieses Tutorials: Windows 7-System, React18-Version, Dell G3-Computer.
const button = <button onClick={handleClick}>按钮</button>In React sind alle Ereignisse synthetisch und keine nativen DOM-Ereignisse, aber DOM-Ereignisse können über die Eigenschaft e.nativeEvent abgerufen werden. Zum Beispiel:
const handleClick = (e) => console.log(e.nativeEvent);; const button = <button>按钮</button>Sie können oben sehen, dass React-Ereignisse und native Ereignisse sehr ähnlich sind, es gibt jedoch bestimmte Unterschiede: Die Ereignisnamen werden unterschiedlich benannt.
// 原生事件绑定方式 <button onclick="handleClick()">按钮命名</button> // React 合成事件绑定方式 const button = <button onClick={handleClick}>按钮命名</button>
// 原生事件 事件处理函数写法 <button onclick="handleClick()">按钮命名</button> // React 合成事件 事件处理函数写法 const button = <button onClick={handleClick}>按钮命名</button>Obwohl onclick an das DOM-Element gebunden zu sein scheint, bindet es die Ereignis-Proxy-Funktion tatsächlich nicht direkt an den realen Knoten, sondern bindet alle Ereignisse mithilfe einer einheitlichen Methode an die äußerste Schicht der Struktur Zu überwachende Ereignisse. [Verwandte Empfehlungen:
Programmier-Tutorial
]Wenn ein Ereignis auftritt, wird es zunächst von diesem einheitlichen Ereignis-Listener verarbeitet. Anschließend wird die eigentliche Ereignisbehandlungsfunktion im Mapping gefunden und aufgerufen. Dies vereinfacht den Ereignisverarbeitungs- und Recyclingmechanismus und verbessert die Effizienz erheblich. 2. Ausführungsreihenfolge
Bezüglich der Ausführungsreihenfolge von synthetischen React-Ereignissen und nativen Ereignissen können Sie sich das folgende Beispiel ansehen: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 事件监听!"); }); this.childRef.current?.addEventListener("click", () => { console.log("原生事件:子元素 DOM 事件监听!"); }); document.addEventListener("click", (e) => { console.log("原生事件:document DOM 事件监听!"); }); } parentClickFun = () => { console.log("React 事件:父元素事件监听!"); }; childClickFun = () => { console.log("React 事件:子元素事件监听!"); }; render() { return ( <div ref={this.parentRef} onClick={this.parentClickFun}> <div ref={this.childRef} onClick={this.childClickFun}> 分析事件执行顺序 </div> </div> ); } } export default App;Die Ausgabereihenfolge lautet:
原生事件:子元素 DOM 事件监听! 原生事件:父元素 DOM 事件监听! React 事件:子元素事件监听! React 事件:父元素事件监听! 原生事件:document DOM 事件监听!Die folgenden Schlussfolgerungen können gezogen werden:
Block Um Blasenbildung zwischen synthetischen Ereignissen zu verhindern, verwenden Sie e.stopPropagation()
, um die Blasenbildung zwischen synthetischen Ereignissen zu stoppen und Ereignisse im äußersten Dokument und verwenden Sie e.nativeEvent.stopImmediatePropagation()document.body.addEventListener('click', e => { if (e.target && e.target.matches('div.code')) { return; } this.setState({ active: false, }); }); }
Das obige ist der detaillierte Inhalt vonWie man die synthetischen Ereignisse von React beschreibt. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!