Maison > Article > interface Web > Comment décrire les événements synthétiques de React
L'événement synthétique React est un objet d'événement qui simule toutes les capacités des événements DOM natifs dans React, c'est-à-dire un wrapper multi-navigateur pour les événements natifs du navigateur, il définit les événements synthétiques selon les spécifications du W3C, est compatible avec tous les navigateurs ; a les mêmes capacités que les événements natifs du navigateur. Même interface. Dans React, tous les événements sont des événements DOM synthétiques et non natifs, mais les événements DOM peuvent être obtenus via la propriété « e.nativeEvent ».
L'environnement d'exploitation de ce tutoriel : système Windows 7, version React18, ordinateur Dell G3.
Le mécanisme d'événements basé sur un navigateur de React lui-même implémente un ensemble de mécanismes d'événements, notamment l'enregistrement d'événements, la synthèse d'événements, le bouillonnement d'événements, la répartition d'événements, etc.
Cet ensemble de mécanismes d'événements dans React est appelé événements synthétiquesSyntheticEvent
L'événement synthétique React (SyntheticEvent) est un objet d'événement qui simule toutes les capacités des événements DOM natifs dans React, c'est-à-dire le Cross- natif du navigateur. wrapper de navigateur pour les événements. Il définit des événements synthétiques selon la spécification W3C, est compatible avec tous les navigateurs et possède la même interface que les événements natifs des navigateurs. Par exempleconst button = <button onClick={handleClick}>按钮</button>Dans React, tous les événements sont des événements DOM synthétiques et non natifs, mais les événements DOM peuvent être obtenus via la propriété e.nativeEvent. Par exemple :
const handleClick = (e) => console.log(e.nativeEvent);; const button = <button>按钮</button>Vous pouvez voir ci-dessus que les événements React et les événements natifs sont très similaires, mais il existe certaines différences :
// 原生事件绑定方式 <button onclick="handleClick()">按钮命名</button> // React 合成事件绑定方式 const button = <button onClick={handleClick}>按钮命名</button>
// 原生事件 事件处理函数写法 <button onclick="handleClick()">按钮命名</button> // React 合成事件 事件处理函数写法 const button = <button onClick={handleClick}>按钮命名</button>Bien que onclick semble être lié à l'élément DOM, il ne lie en fait pas la fonction proxy d'événement directement au nœud réel. Au lieu de cela, il lie tous les événements à la couche la plus externe de la structure, en utilisant une structure unifiée. Événements à surveiller. [Recommandations associées :
Tutoriel vidéo Redis, Tutoriel de programmation]
Cet écouteur d'événements maintient un mappage pour enregistrer les fonctions d'écoute et de traitement des événements à l'intérieur de tous les composants. Lorsqu'un composant est monté ou démonté, insérez ou supprimez simplement certains objets sur cet écouteur d'événements unifié. Lorsqu'un événement se produit, il est d'abord traité par cet écouteur d'événements unifié, puis la véritable fonction de gestion des événements est trouvée dans le mappage et appelée. Cela simplifie le mécanisme de traitement et de recyclage des événements et améliore considérablement l’efficacité.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;L'ordre de sortie est :
原生事件:子元素 DOM 事件监听! 原生事件:父元素 DOM 事件监听! React 事件:子元素事件监听! React 事件:父元素事件监听! 原生事件:document DOM 事件监听!Les conclusions suivantes peuvent être tirées :
document.body.addEventListener('click', e => { if (e.target && e.target.matches('div.code')) { return; } this.setState({ active: false, }); }); }
Vidéo de base sur la programmation)
Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!