Javascript 如何克隆或重新分派DOM事件？

我只是在寻找一种简单而抽象的方法来克隆或重新分派DOM事件。我对克隆DOM节点不感兴趣

我做了一点实验，读了这篇文章，没有找到明确的答案

理想情况下，我正在寻找一种直截了当的方式：

handler = function(e){
  document.getElementById("decoy").dispatchEvent(e)
}
document.getElementById("source").addEventListener("click", handler)

当然，这个代码示例不起作用。有一个DOM异常声明事件当前正在被调度-显然

我希望避免使用

document.createEvent（）

手动创建新事件，初始化并分派它们

---

这个用例有一个简单的解决方案吗？

我知道，这个问题很老，OP希望避免创建/初始化方法，但是有一种相对简单的方法来复制事件：

new_event = new MouseEvent(old_event.type, old_event)

如果您想要的不仅仅是鼠标事件，您可以执行以下操作：

new_event = new old_event.constructor(old_event.type, old_event)

在最初的上下文中：

handler = function(e) {
  new_e = new e.constructor(e.type, e);
  document.getElementById("decoy").dispatchEvent(new_e);
}
document.getElementById("source").addEventListener("click", handler);

（对于jQuery用户：您可能需要使用

e.originalEvent.constructor

而不是

e.constructor

）

Internet Explorer的修复程序 Alexis发布了一个很好的解决方案，但他的解决方案在Internet Explorer中不起作用。下面的解决方案将继续。不幸的是，Internet Explorer中没有像事件构造函数那样一致的系统，因此下面的代码膨胀是必要的

var allModifiers=[“Alt”、“AltGraph”、“CapsLock”、“Control”，
“Meta”、“NumLock”、“Scroll”、“Shift”、“Win”]；
函数redispatchEvent（原始，新目标）{
if（事件类型==“函数”）{
var eventCopy=new original.constructor（original.type，original）；
}否则{
//Internet Explorer
var eventType=original.constructor.name；
var eventCopy=document.createEvent（eventType）；
if（原始.getModifierState）
var modifiersList=allModifiers.filter(
original.getModifierState，
起初的
).加入（“”）；
如果（eventType==“MouseEvent”）原始.initMouseEvent(
original.type，original.bubbles，original.cancelable，
original.view，original.detail，original.screenX，original.screenY，
original.clientX，original.clientY，original.ctrlKey，
original.altKey，original.shiftKey，original.metaKey，
original.button，original.relatedTarget
);
如果（eventType==“DragEvent”）原始.initDragEvent(
original.type，original.bubbles，original.cancelable，
original.view，original.detail，original.screenX，original.screenY，
original.clientX，original.clientY，original.ctrlKey，
original.altKey，original.shiftKey，original.metaKey，
original.button，original.relatedTarget，original.dataTransfer
);
如果（eventType==“WheelEvent”）原始.initWheelEvent(
original.detail，original.screenX，original.screenY，
original.clientX，original.clientY，original.button，
原始.relatedTarget，修改器列表，
original.deltaX，original.deltaY，original.deltaZ，original.deltaMode
);
如果（eventType==“PointerEvent”）原始.initPointerEvent(
original.type，original.bubbles，original.cancelable，
original.view，original.detail，original.screenX，original.screenY，
original.clientX，original.clientY，original.ctrlKey，
original.altKey，original.shiftKey，original.metaKey，
original.button，original.relatedTarget，
original.offsetX、original.offsetY、original.width、original.height、，
原始压力，原始旋转，
original.tiltX，original.tiltY，
original.pointerId，original.pointerType，
original.timeStamp，original.isPrimary
);
如果（eventType==“TouchEvent”）原始.initTouchEvent(
original.type，original.bubbles，original.cancelable，
original.view，original.detail，original.screenX，original.screenY，
original.clientX，original.clientY，original.ctrlKey，
original.altKey，original.shiftKey，original.metaKey，
original.touchs，original.targetTouches，original.changedTouches，
原始。缩放，原始。旋转
);
如果（eventType==“TextEvent”）原始.initTextEvent(
original.type，original.bubbles，original.cancelable，
原始视图，
original.data，original.inputMethod，original.locale
);
如果（eventType==“CompositionEvent”）原始.initTextEvent(
original.type，original.bubbles，original.cancelable，
原始视图，
original.data，original.inputMethod，original.locale
);
如果（eventType==“KeyboardEvent”）原始.initKeyboardEvent(
original.type，original.bubbles，original.cancelable，
original.view、original.char、original.key、，
original.location，修饰符列表，original.repeat
);
如果（eventType==“InputEvent”| | eventType==“UIEvent”）
original.initUIEvent(
original.type，original.bubbles，original.cancelable，
原始视图，原始细节
);
如果（eventType==“FocusEvent”）原始.initFocusEvent(
original.type，original.bubbles，original.cancelable，
original.view、original.detail、original.relatedTarget
);
}
document.getElementById（newTargetId）.dispatchEvent（eventCopy）；
if（eventCopy.defaultPrevented）newTargetId.preventDefault（）；
}

点击这里
Alternate按钮

为什么需要重新修补事件？我需要将此作为当前不分派子节点事件的CSS区域的解决方法。区域仅呈现子节点内容，不充当父节点。请注意，这仅适用于现代版本的Firefox和Chrome，而不适用于任何版本的IE@Alexis我得到：

未捕获类型错误：非法构造函数

：（我刚刚在npm上组装了一个名为clone event的模块，它基本上封装了这个答案中描述的功能，这就是我当前在重新分派事件时使用的功能。我已经在Chrome v37中对这个方法进行了基本测试，它似乎起到了作用。如果有人发现一个bug，或者在一个它不存在的环境中，我将不胜感激。）