具有事件的Javascript克隆對象

Question

我正在使用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中克隆對象的限制嗎？

創建克隆對象后，是否可以向克隆對象添加事件？

謝謝。

Answer 1

我希望能對您有所幫助的幾點想法：

首先，您將獲得兩個具有相同ID（“ master”）的元素， getElementById將僅選擇其中一個。 確保您的ID在整個DOM中保持唯一！ 如果要為多個元素使用相同的標識符，請使用class="master"和getElementsByClassName 。

如果您閱讀https://developer.mozilla.org/en-US/docs/Web/API/Node/cloneNode ，它說明既未復制內聯事件監聽器，也未復制附加的事件監聽器，因此您必須在代碼中重新分配它們。

我建議您調查AddEventListener之類的東西，因為克隆后要將事件偵聽器附加到新的DOM節點，您將必須使用它。

具有事件的Javascript克隆對象

問題描述

1 個解決方案

解決方案1
1 已采納 2015-10-22 07:05:26

具有事件的Javascript克隆對象

問題描述

1 個解決方案

解決方案1 1 已采納 2015-10-22 07:05:26

解決方案1
1 已采納 2015-10-22 07:05:26