javascript - How to refine Synthetic Events in Flow? -

so have handler accepts different kinds of syntheticevents code:

    defaultprops = {             events: [                 'mousemove',                 'keydown',                 'wheel',                 'dommousescroll',                 'mousewheel',                 'mousedown',                 'touchstart',                 'touchmove',                 'mspointerdown',                 'mspointermove',             ],             element:               (typeof window === 'undefined' ? 'undefined' : typeof window) ===             'object'                 ? document                 : {},     }      componentdidmount() {             this.props.events.foreach((eventname: string) => {                 if (this.props.element) {                     this.props.element.addeventlistener(                         eventname,                         this.handleevent(),                     );                 }             });     }         handleevent = (event: syntheticevent<*>): void => {           if (event instanceof mouseevent) {             // event mouseevent.           } else if (event instanceof keyboardevent) {           } else {           }         } 

however, above code throws error says mouseevent (this type incompatible syntheticevent) same keyboardevent. @ first thought syntheticevent catch type events.

so main problem differentiating syntheticevent , event class. thought event converted syntheticevents in react.

when adding event listener element.addeventlistener callback emits event object , not syntheticevent. using addeventlistener , not onclick prop component.