Ordering of Native and ReactJS events -

so have example show issue running code working on right (can't post exact code numerous reasons).

http://codepen.io/anon/pen/jpxzar

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 (       <span>         <button onclick={this.onbuttonclick}>button</button>         <div>events:</div>         <ul>           {this.state.events.map(function(message) {             return <li>{message}</li>;           })}         </ul>       </span>     );   } });  react.render(   <test1 />,    document.getelementbyid('mount-point')); 

here have component in mounting of adds native click event handler on document need track click happens anywhere on page, not within component. have button has reactjs event handler. if click anywhere outside of button, works fine. if click button, both events fired native event fired first , react event need react event triggered first.

how can make sure natively attached events executed after react events?

it appears events being fired in order listeners added. did digging , found information in dom3 spec seems support this, i'm still not quite sure intended behavior supposed be.

in case, tested theory , appears give desired effect: http://codepen.io/anon/pen/ejlrbk

to summarize: you're creating native event listener in componentwillmount. function executes before component's initial call render, native event listener created first. if change componentdidmount, execute after initial call render, , event listener in render created first, , called first when clicking button in example code.