使用cloneNode克隆节点时如何保留按钮绑定的event listener事件监听器

cloneNode() 方法的深度克隆参数 true 仅会复制DOM节点的结构、内置HTML属性、写在标签上的内联事件，不会复制通过 addEventListener 动态绑定的事件监听器，也不会复制通过JS赋值给 onclick 等属性的事件处理函数，这是克隆后按钮无法触发事件的根本原因。

你的需求是把元素移动到ul容器内，完全不需要走「克隆+删除原节点」的流程：DOM的appendChild方法本身就支持移动已存在于文档中的节点——如果传入的节点已经有父节点，浏览器会自动将该节点从原位置移除，再追加到新的父节点下，原节点绑定的所有事件监听器都会完整保留。
对应代码修改为：

ul.appendChild(element);

如果你所在的场景必须保留原节点、只能使用克隆生成的新节点，可以选择以下两种方案：

• 使用事件委托：把按钮的点击事件绑定在ul父容器上，通过事件冒泡判断触发源是否为目标按钮来执行逻辑，所有新增/克隆的同类型按钮都能自动生效，无需单独绑定
• 克隆完成后，手动获取新节点下的按钮元素，重新为其绑定对应的事件监听器

内容的提问来源于stack exchange，提问作者user15392855