Shulou(Shulou.com)05/31 Report--

This article mainly introduces the relevant knowledge of the differences between react events and native events. The content is detailed and easy to understand. The operation is simple and fast. It has certain reference value. I believe everyone will gain something after reading this article on the differences between react events and native events. Let's take a look at it together.

The difference between react events and native events is that react events are bound to document, while native events are bound to dom. Events on dom take precedence over events on document, relative to binding, and react event objects are synthetic objects, not native.

This tutorial will operate on Windows 10, React17.0.1, Dell G3 PC.

What is the difference between a react event and a native event?

Events in react are bound to document,

Native events are events bound to dom,

Therefore, events on dom take precedence over events on document execution relative to binding locations.

What is an event?

First of all, JS is to achieve some dynamic operations, and users will sometimes want to implement some functions, such as submitting forms, mouse clicks, etc., to trigger this event in the browser, and then the browser will perceive (or capture) the user's behavior, will respond to handle this event. This is called an event.

What is an event object?

When the system invokes the handler, it encapsulates all the information that the event will happen into an object and passes it as a parameter to the event handler, and this object is the event object. In native functions, we often see an event, and this thing is what we call an event object.

React has the following advantages in event handling:

Almost all events are delegated to documents for performance optimization purposes

For each type of event, uniformly distribute events using dispatchEven

Event objects are synthetic events, not native ones

React synthetic events

Why is it abstracted as a composite event?

If all event handlers are tied to DOM, then the page response time will be affected, causing the page to be slow. react In order to avoid abuse of DOM events and shield system differences between different browser events, a middle layer-synthetic Event is implemented.

principle

In react, if you need to bind events, you will usually write this in JSX:

I am reacting to click events

However, in react, the click event is not actually bound to the DOM of div, but to DOCUMENT. When the event occurs and bubbles to document, react will hand over the content of the event to the corresponding function for processing.

How to use native events in react

Although react encapsulates almost all native events, such as:

After Modal is enabled, click on other blank areas to close Modal

Introduce third-party libraries implemented as native events and need to interact with each other

And so on, you have to use native events for business logic processing.

Since native events need to be bound to the real DOM, they are usually bound during the execution of the compoentdidmout/ref function.

class Demo extends Domponent { componentDidMount () { const parentDom = ReactDom.findDOMNode(this) const childDom = parentDom.queneSelector('.button'); childDom.addEventListen('click',this.onDomClick, false) } onDOMClick = (e) => { } render () { return demo }}

Mixed use of native and synthetic events

If you need to mix native events and synthetic events in a business scenario, you need to pay attention to the following points during use:

Order of Response

class Demo extends Domponent { componentDidMount () { const parentDom = ReactDom.findDOMNode(this) const childDom = parentDom.queneSelector('.button'); childDom.addEventListen('click',this.onDomClick, false) } onDOMClick = (e) => { console.log('dom event! ') } onReactClick = (e) => { console.log('react event! ') } render () { return demo }}

Result output:

dom event! react event!

Cause analysis: First of all, we know that native events are bound to DOM, while synthetic events are bound to document. Therefore, events on DOM are bubbled first, and then executed, and then bubbled to document, and synthetic events are executed.

The content of this article on "What are the differences between react events and native events" is introduced here. Thank you for reading! I believe everyone has a certain understanding of the knowledge of "what is the difference between react events and native events." If you still want to learn more knowledge, please pay attention to the industry information channel.

Welcome to subscribe "Shulou Technology Information " to get latest news, interesting things and hot topics in the IT industry, and controls the hottest and latest Internet news, technology news and IT industry trends.