动态添加功能作为属性

时间:2018-12-03 22:03:07

标签: javascript

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不起作用,它会在页面加载时触发。

4 个答案:

答案 0 :(得分:4)

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

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

答案 1 :(得分:0)

只需使用setAttribute

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

答案 2 :(得分:0)

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

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

答案 3 :(得分:0)

所有问题都刚刚开始,因为您使用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);
        }
    }