dom_dom0700_002

cloneNode() で作った複製には既存のイベントリスナはコピーされない。必要なら複製後に ( A ) を付け直すか、親に ( B ) を使って対応する。

解答

A: addEventListener
B: イベントデリゲーション

解説

イベントリスナは DOM 構造ではなく内部状態なので複製されません。複製後に再度 addEventListener で登録するか、親要素でイベントを受けて event.target を判定する委譲が有効です。

使用例(サンプルコード)

[ html ]

<ul id="list"><li class="btn">click</li></ul>
<script>
  const li = document.querySelector('.btn');
  // 親で委譲
  document.getElementById('list').addEventListener('click', e=>{
    if(e.target.matches('.btn')) alert('clicked!');
  });
  // 複製してもリスナは不要(委譲で拾える)
  document.getElementById('list').append(li.cloneNode(true));
</script>