How can I dispatch SyntheticEvent?

I'm working on a component that won't have an input / select element, but I want it to behave like one, dispatching the same events as the React input, expecting to have something like this:

<div onChange={this.onChange}>
    <MyComponent/>
    <input type="text"/>
</div>

      

        
        
        
      

    

In this example, both inputs and MyComponent must reach this .onChange listener.

I know how to send real DOM events, but that doesn't make it an onChange listener, but only a real addEventListener on the DOM:

var event = document.createEvent('HTMLEvents');
event.initEvent('change', true, false);

this.getDOMNode().dispatchEvent(event);

      

        
        
        
      

    

Maybe the answer is here (or here ?), But I'm still struggling with it.

UPDATE

Thanks to @limelights for preparing the playground:

http://jsfiddle.net/coma/a8wgh5wk/1/