私は試した
_node.cloneNode(true); // deep copy
_
node.addEventListener("click", someFunc);
を使用して追加したイベントリスナーをコピーしていないようです。
Dojoライブラリーを使用します。
cloneNode()
は、イベントリスナーをコピーしません。実際、イベントリスナーがアタッチされると、DOMを介してイベントリスナーを保持する方法がないため、オプションは次のとおりです。
Node.addEventListener()
を囲むラッパー関数を使用して、各ノードに追加されたリスナーを追跡します。これは、jQueryの clone()
メソッドが、たとえば、イベントリスナーを使用してノードをコピーする方法です。イベント委任の例。
Tim Downの答えを読んだ後、委任されたイベントは実装が非常に簡単で、私が抱えていた同様の問題を解決できることがわかりました。 DojoではなくJQueryにありますが、具体的な例を追加すると思いました。
Semantic UIでアプリケーションを再スキーしています。これには、メッセージの閉じるボタンを機能させるためにJSの一部が必要です。ただし、メッセージは、ライブラリのdocument.importNode
を使用してHTMLテンプレートタグから複製されます。つまり、イベントハンドラーを新しいHTMLのテンプレートに添付したとしても、それらは複製中に失われます。
メッセージングライブラリはフロントエンドフレームワークにとらわれないため、複製中に単純に再アタッチするために、Timのオプション1を実行することはできません。 (興味深いことに、以前のフロントエンドはZurb Foundationにあり、Zurb Foundationは "data-closable"属性を使用していましたが、その機能はクローン作成プロセスを生き残ります)。
$('.message .close').on('click', function() {
$(this)
.closest('.message')
.transition('fade');
});
App-loadでの「.message」という問題は、単一のテンプレートにのみ一致し、後でWebソケットを介して到着する実際のメッセージには一致しません。
これを委任することは、メッセージが複製されるコンテナにイベントを添付することを意味しました<div id="user-messages">
したがって、次のようになります。
$('#user-messages').on('click', '.message .close', function() {
$(this)
.closest('.message')
.transition('fade');
});
これはすぐに機能し、イベントサブをラップする3番目のオプションのような複雑な作業を保存します。
Dojoでの同等物 は概念的にはかなり似ています。
これは質問に正確に答えるものではありませんが、ユースケースが要素をcopyingではなくmovingを許可する場合、使用できます removeChild とともに appendChild を使用すると、イベントリスナーが保持されます。例えば:
function relocateElementBySelector(elementSelector, destSelector) {
let element = document.querySelector(elementSelector);
let elementParent = element.parentElement;
let destElement = document.querySelector(destSelector);
elementParent.removeChild(element);
destElement.appendChild(element);
}
これが @ JeromeJ がコメントで説明したことです。このHTMLコードを使用して初期要素を作成します。
<DIV ONCLICK="doSomething(this)">touch me</DIV>
この要素を複製すると、結果は同じハンドラーを持ち、「this」は複製された要素を指します。
ONCLICKハンドラーをJavaScriptに簡単に追加できると便利です。このアプローチは、コードの一部をHTMLで記述する必要があることを意味します。