flare-target-vs-root.md

React Flare

Target vs Root events

With Flare, you can build responders to intercept DOM events. There are two types of ways of doing this:

• capturing target events
• capturing root events

Target events occur on a child in a sub-tree:

<div>
  <div responders={<PressResponder />}
    <button1>I am a target because I am in the responder sub-tree</button1>
  </div>
  <button2>I am not a target, so you need root events to capture me</button2>
</div>

Root events occur anywhere on the page. You can conditionally listen to root events based off something occuring as a target event:

const PressResponder = {
  targetEventTypes: ['mousedown'],

  onEvent(event, context) {
    if (event.type === 'mousedown') {
    	context.addRootEventTypes(['mouseup']);
    }
  }

  onRootEvent(event, context) {
    if (event.type === 'mouseup') {
      context.removeRootEventTypes(['mouseup']);
    }
  }
}