What is event bubbling and capturing in React?

What is event bubbling and capturing in React?

Event bubbling and capturing are two phases of event propagation in the DOM. In bubbling, the event starts from the target element and propagates up to the root. In capturing, the event starts from the root and goes down to the target element.

Can you give me an example of how to implement event bubbling in a React component?

Sure! In a React component, you can handle an event on a parent element and it will bubble up from child elements. For example:

function Parent() {
  const handleClick = () => {
    console.log('Parent clicked!');
  };

  return (
    <div onClick={handleClick}>
      <Child />
    </div>
  );
}

function Child() {
  return <button>Click me!</button>;
}

When you click the button, 'Parent clicked!' will be logged due to bubbling.

How can I stop event bubbling in React?

You can stop event bubbling by calling event.stopPropagation() in your event handler. For example:

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

  return <button onClick={handleClick}>Click me!</button>;
}

In this case, clicking the button will only log 'Child clicked!' and not trigger the parent's click handler.

What are some common use cases for event capturing?

Event capturing is less common but useful in scenarios where you want to intercept events before they reach the target element. For example, you might want to implement a global event handler that can handle events from multiple child components.