ReactJS SyntheticEvent stopPropagation() only works with React events?

ReactJS provides a powerful event system that allows developers to handle user interactions efficiently. One of the features of React’s SyntheticEvent is the stopPropagation() method, which prevents the event from bubbling up the DOM tree.

But does stopPropagation() only work with React events? Let’s explore this question and find out!

Understanding stopPropagation()

Before we dive into the main question, let’s quickly understand what stopPropagation() does. When an event occurs on an element, it triggers the event handlers attached to that element and then propagates to its parent elements. This propagation is called event bubbling.

React’s SyntheticEvent provides the stopPropagation() method, which stops the event from further propagation. It means that the event will not trigger any event handlers attached to the parent elements.

Using stopPropagation() with React Events

React events are synthetic events provided by ReactJS. These events are normalized to work consistently across different browsers. When using stopPropagation() with React events, it works as expected and prevents the event from bubbling up the DOM tree.

Here’s an example:

import React from 'react';

const MyComponent = () => {
  const handleClick = (event) => {
    event.stopPropagation();
    console.log('Button clicked!');
  }

  return (
    
 console.log('Div clicked!')}>
      Click Me
    
  );
}

export default MyComponent;

In the above code snippet, we have a button inside a div. The onClick event handler for the button calls the handleClick function, which stops the event propagation using stopPropagation(). As a result, only the button’s event handler will be triggered, and the console will log ‘Button clicked!’ without logging ‘Div clicked!’.

Using stopPropagation() with Non-React Events

Now, let’s address the main question: does stopPropagation() only work with React events? The answer is no, stopPropagation() can be used with non-React events as well.

Non-React events are native DOM events that are not synthetic events provided by ReactJS. These events can be handled using traditional event listeners.

Here’s an example:

const button = document.querySelector('button');

const handleClick = (event) => {
  event.stopPropagation();
  console.log('Button clicked!');
}

button.addEventListener('click', handleClick);

document.addEventListener('click', () => {
  console.log('Document clicked!');
});

In the above code snippet, we have a button and a document event listener. The handleClick function is attached as a click event listener to the button. When the button is clicked, the event.stopPropagation() method is called, preventing the event from bubbling up to the document event listener. As a result, only the button’s event handler will be triggered, and the console will log ‘Button clicked!’ without logging ‘Document clicked!’.

Conclusion

In conclusion, the stopPropagation() method is not limited to React events only. It can be used with both React events and non-React events to prevent event bubbling. Whether you are working with ReactJS or traditional JavaScript, stopPropagation() can help you handle events more effectively.