Clone a DOM event object to re-dispatch

Question

Some browsers won't allow you to re-dispatch an event that has already been dispatched, but allow you to create new event objects based on values that can be obtained from the existing event object.

Is there a generic and reusable solution that will work with any event type, or failing that, a way to do this for a specific event type (in my case I'm currently concerned with the mousewheel event)?

Answer 1

It seems there is now an even better solution, since initMouseEvent and the like are deprecated. The MouseEvent() constructor, for example, takes a table of properties as its second parameter, for which you can use an existing MouseEvent object:

let my_event = new MouseEvent(`foo`, some_existing_mouse_event);
dispatchEvent(my_event);

Other classes of events have similar constructors that should be usable in the same way. Such as ClipboardEvent().

jsfiddle example

Answer 2

I found my own answer, at least for MouseEvents specifically:

function cloneMouseEvent( e ) {
    var evt = document.createEvent( "MouseEvent" );
    evt.initMouseEvent( e.type, e.canBubble, e.cancelable, e.view, e.detail, e.screenX, e.screenY, e.clientX, e.clientY, e.ctrlKey, e.altKey, e.shiftKey, e.metaKey, e.button, e.relatedTarget );
    return evt;
}

You can then dispatch the event on a target with:

target.dispatchEvent( evt );