javascript - 点击获取 元素 - vanilla JS

Question

我有一个函数，每次用户在输入中插入一个值时，它都会添加一个 <li> <ul> 中的元素.同样的函数创建了 <li>具有属性 ( onclick="doneToggle" )。

function createListElement() {
    var li = document.createElement("li");
    ul.appendChild(li);
    li.appendChild(document.createTextNode(input.value));
    li.setAttribute("onclick", "doneToggle()")
    li.setAttribute("style", "width: fit-content")
    input.value = "";
}

doneToggle 是我想向该元素添加特定类的函数，该 css 类使文本具有“直通”样式。

到目前为止，这是功能

function doneToggle(element) {
    element.classList.toggle("done");
}

我希望该函数检索被单击的元素并切换其类，而无需将 ID 分配给 <li>的。提前谢谢你

Answer 1

使用 Element.prototype.addEventListener() 代替 onclick。这样，event 会自动传递给处理函数，它允许访问引发事件的 event.target 元素。

代替

li.setAttribute("onclick", "doneToggle()")

做

li.addEventListener('click', doneToggle)

然后处理使用包含被点击元素的 event.target 传递的 event:

function doneToggle(event) {
    event.target.classList.toggle("done");
}