1. ホーム
  2. javascript

[解決済み] DOMイベントのクローンや再ディスパッチを行うには?

2023-06-20 22:16:33

質問

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をお使いの方:この場合、(1)のように e.originalEvent.constructor の代わりに e.constructor )