title: Ordering of Native and ReactJS events
body: <p>So I have this example to show the issue I am running into with some code I am working on right now (can't post the exact code for numerous reasons).</p>
  
  <p><a href="http://codepen.io/anon/pen/jPxzar" rel="nofollow">http://codepen.io/anon/pen/jPxzar</a></p>
  
  <pre><code>var Test1 = React.createClass({
    getInitialState: function() {
      return {
        events: ['Demo loaded'],
        buttonClicked: false
      };
    },
  
    componentWillMount: function() {
      document.addEventListener('click', this.onDocumentClick);
    },
  
    onDocumentClick: function() {
      var message = 'on document click event (button clicked: ' + this.state.buttonClicked + ')';
      this.setState({
        events: this.state.events.concat([message]),
        buttonClicked: false
      });
    },
  
    onButtonClick: function() {
      this.setState({
        events: this.state.events.concat(['on button click event']),
        buttonClicked: true
      });
    },
  
    render: function() {
      return (
        &lt;span&gt;
          &lt;button onClick={this.onButtonClick}&gt;Button&lt;/button&gt;
          &lt;div&gt;Events:&lt;/div&gt;
          &lt;ul&gt;
            {this.state.events.map(function(message) {
              return &lt;li&gt;{message}&lt;/li&gt;;
            })}
          &lt;/ul&gt;
        &lt;/span&gt;
      );
    }
  });
  
  React.render(
    &lt;Test1 /&gt;, 
    document.getElementById('mount-point'));
  </code></pre>
  
  <p>Here I have a component that in the mounting of adds a native click event handler on the document as I need to track any click that happens anywhere on the page, not just within this component.  I also have a button that has a ReactJS event handler.  If I click anywhere outside of the button, everything works fine.  If I click the button, both events are fired however the native event is fired first and then the React event however I need the React event to be triggered first.</p>
  
  <p>How can I make sure that natively attached events are always executed after React events?</p>