如何克隆或重新调度 DOM 事件

How to clone or re-dispatch DOM events?

本文关键字:调度 DOM 事件 何克隆 新调度      更新时间:2023-09-26

我正在寻找一种简单而抽象的方式来克隆或重新调度 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 的修复

亚历克西斯发布了一个很好的解决方案,但他的解决方案在Internet Explorer中不起作用。以下解决方案将。不幸的是,没有像 Internet Explorer 中的事件构造函数那样一致的系统,因此下面的代码膨胀是必要的。

var allModifiers = ["Alt","AltGraph","CapsLock","Control",
                    "Meta","NumLock","Scroll","Shift","Win"];
function redispatchEvent(original, newTargetId) {
  if (typeof Event === "function") {
    var eventCopy = new original.constructor(original.type, original);
  } else {
    // Internet Explorer
    var eventType = original.constructor.name;
    var eventCopy = document.createEvent(eventType);
    if (original.getModifierState)
      var modifiersList = allModifiers.filter(
        original.getModifierState,
        original
      ).join(" ");
    
    if (eventType === "MouseEvent") original.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
    );
    if (eventType === "DragEvent") original.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
    );
    if (eventType === "WheelEvent") original.initWheelEvent(
      original.detail, original.screenX, original.screenY,
      original.clientX, original.clientY, original.button,
      original.relatedTarget, modifiersList,
      original.deltaX, original.deltaY, original.deltaZ, original.deltaMode
    );
    if (eventType === "PointerEvent") original.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.pressure, original.rotation,
      original.tiltX, original.tiltY,
      original.pointerId, original.pointerType,
      original.timeStamp, original.isPrimary
    );
    if (eventType === "TouchEvent") original.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.touches, original.targetTouches, original.changedTouches,
      original.scale, original.rotation
    );
    if (eventType === "TextEvent") original.initTextEvent(
      original.type, original.bubbles, original.cancelable,
      original.view,
      original.data, original.inputMethod, original.locale
    );
    if (eventType === "CompositionEvent") original.initTextEvent(
      original.type, original.bubbles, original.cancelable,
      original.view,
      original.data, original.inputMethod, original.locale
    );
    if (eventType === "KeyboardEvent") original.initKeyboardEvent(
      original.type, original.bubbles, original.cancelable,
      original.view, original.char, original.key,
      original.location, modifiersList, original.repeat
    );
    if (eventType === "InputEvent" || eventType === "UIEvent")
      original.initUIEvent(
        original.type, original.bubbles, original.cancelable,
        original.view, original.detail
      );
    if (eventType === "FocusEvent") original.initFocusEvent(
        original.type, original.bubbles, original.cancelable,
        original.view, original.detail, original.relatedTarget
    );
  }
  
  document.getElementById(newTargetId).dispatchEvent(eventCopy);
  if (eventCopy.defaultPrevented)  newTargetId.preventDefault();
}
<button onclick="redispatchEvent(arguments[0], '2nd')">Click Here</button>
<button id="2nd" onclick="console.log('Alternate clicked!')">Alternate Button</button>

更通用的解决方案

根据您的需要,比重新调度原始事件更好的解决方案可能是综合事件传播。我们创建了注册事件侦听器的特殊方法,这些方式也向我们的代码公开这些侦听器,以便我们可以手动调用它们。实际上,有一个getEventListeners函数可用于检索当前事件侦听器。但是,getEventListeners仅受Chrome/Safari支持。因此,我设计了以下替换。虽然下面的代码看起来太大了,但下面的代码大多是变量名,所以缩小后会非常小。

/**@type{WeakMap}*/ var registeredListeners = new WeakMap();
hearEvent(document.getElementById("1st"), "click", function propagate(evt) {
  fireEvent(document.getElementById("2nd"), evt, propagate);
});
hearEvent(document.getElementById("2nd"), "click", function(evt) {
  console.log( evt.target.textContent );
});
/**
 * @param{Element} target
 * @param{string} name
 * @param{function(Event=):(boolean|undefined)} handle
 * @param{(Object<string,boolean>|boolean)=} options
 * @return {undefined}
 */
function hearEvent(target, name, handle, options) {
  target.addEventListener(name, handle, options);
  var curArr = registeredListeners.get(target);
  if (!curArr) registeredListeners.set(target, (curArr = []));
  
  curArr.push([
    "" + name,
    handle,
    typeof options=="object" ? !!options.capture : !!options,
    target
  ]);
}
/**
 * @param{Element} target
 * @param{string} name
 * @param{function(Event=):(boolean|undefined)} handle
 * @param{(Object<string,boolean>|boolean)=} options
 * @return {undefined}
 */
function muteEvent(target, name, handle, options) {
  name += "";
  target.removeEventListener(name, handle, options);
  var capturing = typeof options=="object"?!!options.capture:!!options;
  var curArr = registeredListeners.get(target);
  if (curArr)
    for (var i=(curArr.length|0)-1|0; i>=0; i=i-1|0)
      if (curArr[i][0] === name && curArr[i][2] === capturing)
        curArr.splice(i, 1);
  
  if (!curArr.length) registeredListeners.delete(target);
}
/**
 * @param{Element} target
 * @param{Event} eventObject
 * @param{Element=} caller
 * @return {undefined}
 */
function fireEvent(target, eventObject, caller) {
  var deffered = [], name = eventObject.type, curArr, listener;
  var immediateStop = false, keepGoing = true, lastTarget;
  var currentTarget = target, doesBubble = !!eventObject.bubbles;
  
  var trueObject = Object.setPrototypeOf({
    stopImmediatePropagation: function(){immediateStop = true},
    stopPropagation: function(){keepGoing = false},
    get target() {return target},
    get currentTarget() {return currentTarget}
  }, eventObject);
  
  do {
    if (curArr = registeredListeners.get(currentTarget))
      for (var i=0; i<(curArr.length|0) && !immediateStop; i=i+1|0)
        if (curArr[i][0] === name && curArr[i][1] !== caller) {
          listener = curArr[i];
          if (listener[2]) {
            listener[1].call(trueObject, trueObject);
          } else if (doesBubble || currentTarget === target) {
            deffered.push( listener );
          }
        }
    
    if (target.nodeType === 13) {
      // for the ShadowDOMv2
      deffered.push([ target ]);
      currentTarget = target = currentTarget.host;
    }
  } while (keepGoing && (currentTarget = currentTarget.parentNode));
  
  while (
    (listener = deffered.pop()) &&
    !immediateStop &&
    (lastTarget === listener[3] || keepGoing)
  )
    if (listener.length === 1) {
      // for the ShadowDOMv2
      target = listener[0];
    } else {
      lastTarget = currentTarget = listener[3];
      listener[1].call(trueObject, trueObject);
    }
}
<button id="1st">Click Here</button>
<button id="2nd">Alternate Button</button>

请注意,在

缩小后,所有这些代码都整齐地适合一个千字节(在 gzip 之前)。

var k=new WeakMap;m(document.getElementById("1st"),"click",function q(a){r(document.getElementById("2nd"),a,q)});m(document.getElementById("2nd"),"click",function(a){console.log(a.target.textContent)});function m(a,c,f,b){a.addEventListener(c,f,b);var d=k.get(a);d||k.set(a,d=[]);d.push([""+c,f,"object"==typeof b?!!b.capture:!!b,a])}
function r(a,c,f){var b=[],d=c.type,n=!1,p=!0,g=a,t=!!c.bubbles,l=Object.setPrototypeOf({stopImmediatePropagation:function(){n=!0},stopPropagation:function(){p=!1},get target(){return a},get currentTarget(){return g}},c);do{if(c=k.get(g))for(var h=0;h<(c.length|0)&&!n;h=h+1|0)if(c[h][0]===d&&c[h][1]!==f){var e=c[h];e[2]?e[1].call(l,l):(t||g===a)&&b.push(e)}13===a.nodeType&&(b.push([a]),g=a=g.host)}while(p&&(g=g.parentNode));for(;(e=b.pop())&&!n&&(u===e[3]||p);)if(1===e.length)a=e[0];else{var u=g=
e[3];e[1].call(l,l)}}function z(a,c,f,b){c+="";a.removeEventListener(c,f,b);f="object"==typeof b?!!b.capture:!!b;if(b=k.get(a))for(var d=(b.length|0)-1|0;0<=d;d=d-1|0)b[d][0]===c&&b[d][2]===f&&b.splice(d,1);b.length||k.delete(a)}
<button id="1st">Click Here</button>
<button id="2nd">Alternate Button</button>

复制要

保留的对象并且只需处理一类事件会更简单一些:

// base JS (far more complex in reality)
var click = document.querySelector("#clickme");
var txt = document.querySelector("#txt");
click.addEventListener("click", () => {
  txt.textContent++
});
// supplemental JS
var click2 = click.cloneNode(true);
click2.id = "click2"; // don't collide ids!
click2.addEventListener("click", () => {
  click.click();
});
document.querySelector("#parent").appendChild(click2);
<div id="parent">
  <button id="clickme">click me</button>
  <p>Your lucky number is <span id="txt">0</span>!</p>
</div>

"补充 JS"部分演示了对象的克隆。您可以通过代理触发克隆节点的事件,而不是复制事件。