因此,我正在尝试制作一个简单的待办事项清单应用程序.我想在单击项目时将“已检查”类添加到列表中.我试图使用事件委托来做到这一点,但我认为我做的不正确.我不确定是否应该使用“ addEventListener”或“ onclick”.真正的区别是什么？我是javascript的新手,因此,如果您能据此作出解释,我将不胜感激.

<div id="todoList">
    <h1>To Do List</h1>
      <form id="todoForm">
        <input id="todoInput">
        <button type="button" onclick="todoList()">Click Here</button>
      </form>
    <div id="listText">
      <ul id="list">
      </ul>
    </div>
  </div>

CSS

#todoList {
  display: block;
  text-align:center;
}
li {
  list-style: none;
  text-align: left;
  border-bottom: 1px solid black

}
#listText {
  margin-top: 10px;
  margin-left: 30%;
  margin-right: 30%;
  padding-left: 70px;
  padding-right: 85px;
}

ul li.checked {
  text-decoration: line-through;
}

剧本

function todoList() {
  var item = document.getElementById("todoInput").value;
  var text = document.createTextNode(item);
  var listItem = document.createElement("li");
  listItem.appendChild(text);
  document.getElementById("list").appendChild(listItem);
}


  var ul = document.getElementById("ul");
  ul.addEventListener("click", function(e) {
    if (e.target.tagName === "li"){
      e.target.classList.toggle("checked");
    }

  });

解决方法:

你真的很亲密！

function todoList() {
  var item = document.getElementById("todoInput").value;
  var text = document.createTextNode(item);
  var listItem = document.createElement("li");
  listItem.appendChild(text);
  document.getElementById("list").appendChild(listItem);
}

var ul = document.getElementById("list");
  ul.addEventListener("click", function(e) {
  if (e.target.tagName === "LI"){
    e.target.classList.toggle("checked");
  }
});

您的第一个问题是您正在执行document.getElementById(‘ul’),而ul元素的ID实际上是列表.只是一个愚蠢的错误.

实际上,我必须打开devtools并根据您的条件设置一个断点,以检查单击的内容.

原来e.target.tagName评估为LI而不是li.

只需将支票更改为LI

至于如何使用事件. onclick将执行与addEventListener相同的工作.您在此处使用事件委派完成此操作的方式与使用Vanilla JS获得的效果几乎一样好.总而言之,这最终归结为个人喜好,有些框架可能会让您通过元素属性设置事件,有些框架会让您使用事件侦听器进行设置,如果需要,可以进行混合和匹配.这实际上取决于您和您的团队(如果这是一个协作项目).