ReactJS Event Bubbling

onClick event happening late

by erikras

HTML

<script src="http://fb.me/react-with-addons-0.11.0.js"></script>
<script src="http://fb.me/JSXTransformer-0.11.0.js"></script>
<script src="http://fb.me/react-js-fiddle-integration.js"></script>

<div id="content"></div>

<pre id="log"></pre>

CSS

#content {
    padding: 20px;
}
#log {
    padding: 20px;
}
#log div {
    margin: 2px 0;
}

JavaScript 1.7

/** @jsx React.DOM */
function log(message) {
  var div = document.createElement('div');
  div.innerHTML = message;
  document.getElementById('log').appendChild(div);
}

function makeLogger(message) {
  return function() {
    log(message);
  };
}

var Test = React.createClass({
  componentDidMount: function() {
    this.getDOMNode().addEventListener('click', makeLogger('div capture'), true);
    this.getDOMNode().addEventListener('click', makeLogger('div bubble'), false);
    this.refs.button.getDOMNode().addEventListener('click', makeLogger('button capture'), true);
    this.refs.button.getDOMNode().addEventListener('click', makeLogger('button bubble'), false);
  },
  onClick: function() {
    log('react onclick for button');
  },
  render: function()
  {
    return (
       <div>
         <button onClick={this.onClick} ref="button">Click me!</button>
      </div>
    );
  }
});

React.renderComponent(<Test/>, document.getElementById('content'));