IE8- の Node#cloneNode はイベントまでコピーする

DOM JavaScript JScript

DOM2 規定の cloneNode()

DOM Level 2 Core で規定されている Node#cloneNode は「すべての属性と値をコピーします」が、参照は新しく形成されます。
つまり、<p onclick="alert('click');"> のようにHTMLに埋め込んであるイベントはコピーしますが、addEventListener 等で形成されたイベントはコピーしません。

<p id="Sample-1" onclick="alert('onclick attribute')">Click Me!</p>
<script type="text/javascript">
(function () {
  var p = document.getElementById('Sample-1');

  p.addEventListener('click', function () {
    alert('EventListener click');
  }, false);

  p = p.cloneNode(true); // クローンを生成する
  p.id = 'Sample-2';
  document.body.appendChild(p.cloneNode(true));
})();
</script>

IE8- の cloneNode()

IE8- の cloneNode() は attachEvent で形成されたイベントまでコピーします。(IE9で修正済みとの事)

<p id="Sample-1" onclick="alert('onclick attribute')">Click Me!</p>
<script type="text/javascript">
(function () {
  var p1 = document.getElementById('Sample-1');

  p1.attachEvent('onclick', function () {
    alert('attached click');
  });

  var p2 = p.cloneNode(true); // クローンを生成する
  p2.id = 'Sample-2';
  document.body.appendChild(p2.cloneNode(true));

  p1.style.color = 'red';
})();
</script>

IE の cloneNode は似て非なるもの - latest logではIE の cloneNode は参照をコピーするように説明されていますが、IE8 では参照をコピーしないようです。IE7- もしくは IE6- では参照をコピーするのかもしれません。

参考リンク