Question

var objects = [
    { name: "test1", data: "asdf" }, 
    { name: "test2", data: "aa" }, 
    { name: "test3", data: "" }
];
for (var element in objects) {
    var node = document.createElement("p");
    var textnode = document.createTextNode(objects[element].name);
    node.setAttribute("id", objects[element].name)
    node.draggable = true;
    node.ondragstart = "drag(event)";
    node.appendChild(textnode);
    document.getElementById("leftUI").appendChild(node);
}

当我检查元素时，这就是我看到的：

<p id="test1" draggable="true">test1</p>
<p id="test2" draggable="true">test2</p>
<p id="test3" draggable="true">test3</p>

我需要在代码中看到ondragstart =“ drag（event）”内容：

<p id="test1" draggable="true" ondragstart="drag(event)">test1</p>
<p id="test2" draggable="true" ondragstart="drag(event)">test2</p>
<p id="test3" draggable="true" ondragstart="drag(event)">test3</p>

我该怎么做？

addEventListener不起作用，它会在页面加载时触发。

Answer 1

将node.ondragstart = "drag(event)";替换为node.ondragstart = drag

使用javascript时，您实际上必须分配函数，而不仅仅是代表函数的字符串。

Answer 2

只需使用setAttribute：

node.setAttriubte("ondragstart", "drag(event)");

Answer 3

您有一些答案可以告诉您如何执行所需的操作，但是基于有关addEventListener的声明导致事件在页面加载时触发，这听起来像是您在尝试解决导致的问题错误地使用addEventListener。我的猜测是您使用的是这样的东西：node.addEventListener('dragstart', drag(event))或某种类似的形式，会在添加侦听器时使函数执行。

正确使用的格式为node.addEventListener('dragstart', drag)。请注意，您不应包含任何参数或括号；仅列出功能名称。

Answer 4

所有问题都刚刚开始，因为您使用var而不是let

    "use strict"
    let objects = [
        { name: "test1", data: "asdf" }, 
        { name: "test2", data: "aa" }, 
        { name: "test3", data: "xyz" }
    ];
    for (let element in objects)
    {
        let
            node     = document.createElement("p"),
            textnode = document.createTextNode(objects[element].name)
        ;
        
        node.setAttribute("id", objects[element].name);
        node.draggable   = true;
        // node.setAttribute('ondragstart', "drag(event)");

        node.appendChild(textnode);

        document.getElementById("leftUI").appendChild(node);

        node.ondragstart = function(e) {
            console.log(objects[element].data);
        }
    }

动态添加功能作为属性

4 个答案: