top of page
Logo der Online Agentur mdwp

SyntheticEvent

React JS uses a concept called SyntheticEvent which is a cross-browser wrapper around the browser's native event. It combines the behavior of different browsers into one API, ensuring the events have consistent properties across different browsers.

In other words, SyntheticEvent is React's own event system which works in the same way as native events in Javascript. It was designed by Facebook to normalize events, making them have consistent properties and behave the same in all browsers.

The power of SyntheticEvent comes from its pooling. This means that every event that React creates is reused for other events to maximize performance. For example, when an event is finished being used, its properties are nullified and its value returns back to the pool.

Below is an example of how SyntheticEvent system is used in React JS:

```javascript
class MyButton extends React.Component {
handleClick(event) {
event.preventDefault();
console.log('Clicked!');
}

render() {
return (
<button onClick={this.handleClick}>
Click me
</button>
);
}
}

ReactDOM.render(
<MyButton />,
document.getElementById('root')
);
```
In the example, a SyntheticEvent is created when the button is clicked and passed to the `handleClick` function as an argument.

bottom of page