带有事件的 Javascript 克隆对象答案

【问题标题】：Javascript Clone Objects with Events带有事件的 Javascript 克隆对象
【发布时间】：2016-01-21 09:06:08
【问题描述】：

我正在使用 JavaScript，没有库。

我刚刚在 JS 中发现了克隆，并试图弄清楚如何克隆元素但保持附加的事件。

据我所知这是不可能的……

我尝试克隆元素然后添加事件，我尝试先添加事件然后克隆，但从未复制过事件。

这是我的测试代码

<html>
<head>

<style>
    .testClass {
        background-color: red;
        color: black;
        outline-color: green;
        width: 100%;
    }

</style>

<script>

    function onLoad(){

        //create test div
        var x = document.createElement("div");
        x.id = "master";
        x.className = "testClass";
        x.innerHTML = "Text";
        document.body.appendChild(x);

        //clone the div
        var itm = document.getElementById("master");
        var cln = itm.cloneNode(true);
        document.body.appendChild(cln);

        //apply event
        document.getElementById("master").onclick = doFunction;
    }

    function doFunction(){
        alert('working');
    }

</script>

</head>

<body onload="onLoad()">

</body>
</html>

当我检查代码时，克隆元素确实具有相同的 ID，那么为什么单击克隆元素时事件不起作用？似乎因为它是一个克隆，所以您无法将事件附加到它。

这是 JS 中克隆对象的限制吗？

是否可以在克隆对象创建后向其添加事件？

谢谢。

【问题讨论】：

不，这并不是说您不能将事件处理程序附加到它。但是当另一个元素已经具有相同的 id 时，您不能通过它的 id 来选择它。 id 必须是唯一的！

标签： javascript html oop dom

【解决方案1】：

我希望对您有所帮助的一些想法：

首先你会得到两个具有相同 ID（“master”）的元素，getElementById 只会选择其中一个。确保您的 ID 在整个 DOM 中保持唯一！如果您希望多个元素使用相同的标识符，请使用 class="master" 和 getElementsByClassName。

如果您阅读https://developer.mozilla.org/en-US/docs/Web/API/Node/cloneNode，它会声明内联或附加的事件侦听器都不会被复制，因此您必须在代码中重新分配它们。

我建议研究AddEventListener 之类的，因为这是您在克隆后必须使用的，以便将事件侦听器附加到新的 DOM 节点。

【讨论】：