Geek Answers Handbook

Out of order bubble events

Given the following code, I expect a printout 3, 2, 1when I click on a number 3. Actual listing 1, 3, 2.

What is the reason for this?

document.body.onclick = () => {
  console.log('1')
}

function Test() {
  return (
    <div onClick={() => console.log('2')}>
      2
      <div onClick={() => console.log('3')}>
        3
      </div>
    </div>
  )
}

ReactDOM.render(<Test/>, document.querySelector("#root"))
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react-dom.min.js"></script>
<body>
1
<div id="root" />
</body>
Run codeHide result
+6
source share
1 answer

Any native event handlers will be triggered before the React event handlers.

Here's how React handles events:

  • He listens to events at the top level and transforms them into Synthetic Events
  • Puts them in a pool to maintain order
  • Dispatch for response components

Because of this, order is maintained in the React ecosystem, but is out of order relative to the rest.

: https://www.youtube.com/watch?v=dRo_egw7tBc

: https://facebook.imtqy.com/react/docs/events.html#event-pooling

+3

More articles:


All Articles