Example for Bubbling and Capturing in React.js

by

Bubbling and capturing are both supported by React in the same way as described by the DOM spec, except for how you go about attaching handlers.

Bubbling is as straightforward as with the normal DOM API; simply attach a handler to an eventual parent of an element, and any events triggered on that element will bubble to the parent as long as it’s not stopped via stopPropagation along the way:

<div onClick={this.handleClick}>
  <button>Click me, and my parent's `onClick` will fire!</button>
</div>

Capturing is just as straightforward, though it’s mentioned only briefly in the docs. Simply add Capture to the event handler property name. For example onClick becomes onClickCapture:

<div onClickCapture={this.handleClickViaCapturing}>
  <button onClick={this.handleClick}>
    Click me, and my parent's `onClickCapture` will fire *first*!
  </button>
</div>

In this case, if handleClickViaCapturing calls stopPropagation on the event, the button’s onClick handler will not be called.

This JSBin should demonstrate how capturing, bubbling, and stopPropagation works in React: https://jsbin.com/hilome/edit?js,output

More Related Contents:

  1. How to create a translucent in React Native?
  2. The useState set method is not reflecting a change immediately
  3. ReactJS Two components communicating
  4. Prevent scrolling of parent element when inner element scroll position reaches top/bottom?
  5. How to maintain state after a page refresh in React.js?
  6. Simple Component is not rendering: React js
  7. Console.log() after setState() doesn’t return the updated state
  8. Adding new data to firebase users
  9. Where should ajax request be made in Flux app?
  10. How to load image files with webpack file-loader
  11. Understanding React-Redux and mapStateToProps()
  12. React.js: Identifying different inputs with one onChange handler
  13. javascript change background color on click [closed]
  14. setState() inside of componentDidUpdate()
  15. React Hooks – What’s happening under the hood?
  16. How to implement a dynamic form with controlled components in ReactJS?
  17. Embedding SVG into ReactJS
  18. useEffect does not listen for localStorage
  19. Update React component every second
  20. how to set displayName in a functional component [React]
  21. React code throwing “TypeError: this.props.data.map is not a function”
  22. Why need useRef and not mutable variable?
  23. Why is React’s concept of Virtual DOM said to be more performant than dirty model checking?
  24. reactjs and masonry layout – undefined
  25. How to download fetch response in react as file
  26. Scroll into view in react
  27. JSX not allowed in files with extension ‘ .js’ with eslint-config-airbnb
  28. Nothing was returned from render. This usually means a return statement is missing. Or, to render nothing, return null [closed]
  29. how to render child components in react.js recursively
  30. Extending React.js components

Leave a Comment