Menu
Given the following code I would expect a printout of 3, 2, 1 when clicking the number 3. Actual printout is 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>
693
Event bubbling in React refers to when the innermost component handles an event, and events bubble outwards. In React, the innermost element will first be able to handle the event, and then surrounding elements will then be able to handle it themselves.
stopPropagation() within a ReactJS component to stop a click event from bubbling up and triggering a click event that was attached with JQuery in legacy code, but it seems like React's stopPropagation() only stops propagation to events also attached in React, and JQuery's stopPropagation() doesn't stop propagation to ...
Event capturing means propagation of event is done from ancestor elements to child element in the DOM while event bubbling means propagation is done from child element to ancestor elements in the DOM. The event capturing occurs followed by event bubbling.
Any native event handlers will fire before React event handlers.
This is how React works with events:
Because of this, order is maintained within the React ecosystem but out of order relative to the rest.
As explained in this video: https://www.youtube.com/watch?v=dRo_egw7tBc
And vaguely described in the docs: https://facebook.github.io/react/docs/events.html#event-pooling
135
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
