javascript - 从 html oninput() 事件调用 javascript 中的对象方法

Question

在 javascript 中，我有一个相同类的对象列表。每个对象都有相同的变量和方法。 对于添加到列表中的每个对象，都会在 html 代码中添加一个输入字段。

现在，当输入字段的值发生更改（<input oninput=...>）时，我想调用inputModified()列表中与输入字段一起添加到列表中的确切对象的方法。您将如何实现这一目标？

此外，如果从列表中删除了一个对象，那么为该对象添加的 html 代码也会被删除。

增量 id 是唯一的方法吗？另外，请注意我不能使用 jquery 或类似的东西。谢谢！

标签： javascripthtmlobjecteventsmethods

Answer 1

最好的方法是根本不使用<input oninput=...>。使用现代事件处理。然后，您要么附加一个关闭列表中条目的处理程序，要么将列表中的位置包含在元素上，并input在这些inputs 所在的容器上使用委托处理程序来确定要更新列表中的哪个条目。

这是第一个选项的示例，关闭列表中的条目：

function addToDOM(entry) {
    const input = document.createElement("input");
    input.type = "text";
    input.value = entry.value;
    // The event handler closes over `input` and `entry`
    input.addEventListener("input", function() {
        entry.value = input.value;
    });
    return input;
}

const list = [];
const container = document.getElementById("container");
for (let n = 0; n < 10; ++n) {
    const entry = {
        value: `Value ${n + 1}`
    };
    container.appendChild(addToDOM(entry));
    list.push(entry);
}

// Adding another later
setTimeout(() => {
    const entry = {
        value: "Added later"
    };
    container.appendChild(addToDOM(entry));
    list.push(entry);
}, 800);

document.getElementById("btnShowAll").addEventListener("click", function() {
    list.forEach(({value}, index) => {
        console.log(`[${index}].value = ${value}`);
    });
});

<input type="button" id="btnShowAll" value="Show All">
<div id="container"></div>

这是带有单个委托处理程序的第二个选项的示例。但是请注意，如果您修改列表，我们作为data-*属性存储的索引会过期：

function addToDOM(entry, index) {
    const input = document.createElement("input");
    input.type = "text";
    input.value = entry.value;
    input.setAttribute("data-index", index);
    return input;
}

const list = [];
const container = document.getElementById("container");
container.addEventListener("input", function(e) {
    const input = e.target;
    const index = +input.getAttribute("data-index");
    list[index].value = input.value;
});
for (let n = 0; n < 10; ++n) {
    const entry = {
        value: `Value ${n + 1}`
    };
    container.appendChild(addToDOM(entry, list.length));
    list.push(entry);
}

// Adding another later
setTimeout(() => {
    const entry = {
        value: "Added later"
    };
    container.appendChild(addToDOM(entry, list.length));
    list.push(entry);
}, 800);

document.getElementById("btnShowAll").addEventListener("click", function() {
    list.forEach(({value}, index) => {
        console.log(`[${index}].value = ${value}`);
    });
});

<input type="button" id="btnShowAll" value="Show All">
<div id="container"></div>