得到 点击元素 - 香草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传递的event.target：

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

Answer 2

在事件监听器函数中，this引用触发事件的元素，因此不使用element（实际上是事件对象），而是使用this：

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

而不是更改“onclick”属性，添加一个事件监听器：

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