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

Leave a Comment

tech