JavaScript: appendChild, cloneNode, extractContents, cloneContentsとイベントリスナ
DocumentFragmentとdisplay:none、documentに直接追加する場合の速度比較 - 素人がプログラミングを勉強するブログ
Array.forEach(document.getElementsByTagName("a"), function(v){
v.addEventListener("mouseover", function(){alert(1);}, false);
});
var df = document.createDocumentFragment();
df.appendChild(document.body);
document.documentElement.appendChild(df);
// (mouseover) -> alert
Array.forEach(document.getElementsByTagName("a"), function(v){
v.addEventListener("mouseover", function(){alert(1);}, false);
});
var df = document.createDocumentFragment();
df.appendChild(document.body.cloneNode(true));
document.documentElement.replaceChild(df, document.body);
// (mouseover) -> none
Array.forEach(document.getElementsByTagName("a"), function(v){
v.addEventListener("mouseover", function(){alert(1);}, false);
});
var r = document.createRange();
r.selectNode(document.body);
document.documentElement.appendChild(r.extractContents());
// (mouseover) -> none
Array.forEach(document.getElementsByTagName("a"), function(v){
v.addEventListener("mouseover", function(){alert(1);}, false);
});
var r = document.createRange();
r.selectNode(document.body);
document.documentElement.replaceChild(r.cloneContents(), document.body);
// (mouseover) -> none
Firefox2(Win)でのみの結果。
Range#extractContentsだとイベントリスナが消えるが、df.appendChildで一旦移して戻すやり方なら消えず、問題なく使えるということらしい。
これは知らなかった。
このやり方と比較してどうこう言っていたわけではないし、Jintrickさんの指摘がこれを指していたとは思わないけど、これを知らなかったために不正確な発言になっていたという点については訂正します。
