TodoList 网页，比 mouseovert/out 更好的事件监听器？

Question

我的应用程序有一个主要问题。我认为当我将光标放在垃圾桶图标上时，鼠标悬停和鼠标悬停事件侦听器会疯狂地触发，但我不知道为什么。它变得非常糟糕并且无法正确点击它。有什么建议吗？

https://codepen.io/Dali213/pen/ExjLMdG?editors=0110

const ul = document.querySelector("ul");

//initialisation

const arr = ["learn how to use GitHub.", "learn how to use GitHub.", "learn how to use GitHub."];

for (let i = 0; i < arr.length; i++) {

  addToDo(arr[i]);

}

function addToDo(text) {

  const li = document.createElement("li");

  const p = document.createElement("p");

  p.textContent = text;

  li.append(p);

  li.addEventListener("click", lineThrough);

  li.addEventListener("mouseover", addTrashCan);

  li.addEventListener("mouseout", removeTrashCan);

  ul.append(li);

}

//add rubish icon+delete function

function del() {

  const li = this.closest("li");

  li.removeEventListener("click", lineThrough);

  li.removeEventListener("mouseover", addTrashCan);

  li.removeEventListener("mouseout", removeTrashCan);

  li.remove();

}

function addTrashCan() {

  const trashCan = document.createElement("i");

  trashCan.classList.add("far", "fa-trash-alt", "trash-can");

  trashCan.addEventListener("click", del);

  this.prepend(trashCan);

}

function removeTrashCan() {

    const trashCan = this.querySelector("i");

    trashCan.removeEventListener("click", del);

    trashCan.remove();

}

第二个问题，起初我的伪元素 ::first-letter 工作正常，但现在不行。当我查看使用开发工具应用的样式时，它似乎仍然应用......为什么？

非常欢迎对我的代码提出任何建议。

Answer 1

您可以在开头添加垃圾桶，并根据事件显示/隐藏，mouseout而mouseover不是每次都创建元素：.hidden {&nbsp; display: none !important;}function addTrashCan() {&nbsp; this.querySelector('i').classList.remove('hidden')}function removeTrashCan() {&nbsp; this.querySelector('i').classList.add('hidden')}function addToDo(text) {&nbsp; const li = document.createElement("li");&nbsp; const p = document.createElement("p");&nbsp; const trashCan = document.createElement("i");&nbsp; trashCan.classList.add("far", "fa-trash-alt", "trash-can", "hidden");&nbsp; trashCan.addEventListener("click", del);&nbsp; li.prepend(trashCan);&nbsp; p.textContent = text;&nbsp; li.append(p);&nbsp; li.addEventListener("click", lineThrough);&nbsp; li.addEventListener("mouseover", addTrashCan);&nbsp; li.addEventListener("mouseout", removeTrashCan);&nbsp; ul.append(li);}const ul = document.querySelector("ul");const input = document.querySelector("input");//initialisationconst arr = ["learn how to use GitHub.", "learn how to use GitHub.", "learn how to use GitHub."];for (let i = 0; i < arr.length; i++) {&nbsp; addToDo(arr[i]);}function addToDo(text) {&nbsp; const li = document.createElement("li");&nbsp; const p = document.createElement("p");&nbsp; const trashCan = document.createElement("i");&nbsp; trashCan.classList.add("far", "fa-trash-alt", "trash-can", 'hidden');&nbsp; trashCan.addEventListener("click", del);&nbsp; li.prepend(trashCan);&nbsp; p.textContent = text;&nbsp; li.append(p);&nbsp; li.addEventListener("click", lineThrough);&nbsp; li.addEventListener("mouseover", addTrashCan);&nbsp; li.addEventListener("mouseout", removeTrashCan);&nbsp; ul.append(li);}//hide the inputfunction hideInput() {&nbsp; input.classList.toggle("hidden");}//add task to the listfunction enter() {&nbsp; if (event.keyCode === 13) addToDo(this.value);}//line-through on clickfunction lineThrough() {&nbsp; this.querySelector("p").classList.toggle("line-through");}//add rubish icon+delete functionfunction del() {&nbsp; const li = this.closest("li");&nbsp; li.removeEventListener("click", lineThrough);&nbsp; li.removeEventListener("mouseover", addTrashCan);&nbsp; li.removeEventListener("mouseout", removeTrashCan);&nbsp; li.remove();}function addTrashCan() {&nbsp; /*const trashCan = document.createElement("i");&nbsp; trashCan.classList.add("far", "fa-trash-alt", "trash-can");&nbsp; trashCan.addEventListener("click", del);&nbsp; this.prepend(trashCan);*/&nbsp; console.log('in');&nbsp; this.querySelector('i').classList.remove('hidden')}function removeTrashCan() {&nbsp; /*const trashCan = this.querySelector("i");&nbsp; trashCan.removeEventListener("click", del);&nbsp; trashCan.remove();*/&nbsp; console.log('out');&nbsp; this.querySelector('i').classList.add('hidden')}//listenersdocument.querySelector(".display").onclick = hideInput;input.onkeyup = enter;* {&nbsp; padding: 0px;&nbsp; margin: 0px;}body {&nbsp; background: linear-gradient(90deg, #18b7e4, #e8e9be);}.container {&nbsp; background-color: aliceblue;&nbsp; min-width: 270px;&nbsp; max-width: 270px;&nbsp; margin: 80px auto 0px;}.head {&nbsp; padding: 5px 10px;&nbsp; display: flex;&nbsp; justify-content: space-between;&nbsp; background-color: #2072b5;&nbsp; color: #ffffff;}.display,i {&nbsp; cursor: pointer;}input {&nbsp; border: 2px solid #2072b5;&nbsp; width: 246px;&nbsp; padding: 5px 10px;}.hidden {&nbsp; display: none !important;}ul {&nbsp; list-style: none;}p {&nbsp; display: inline;&nbsp; padding: 2px 5px;}p::first-letter {&nbsp; text-transform: capitalize;}li:nth-of-type(odd) {&nbsp; background-color: #f7f5f7;}li:nth-of-type(even) {&nbsp; background-color: #ffffff;}.line-through {&nbsp; text-decoration: line-through;&nbsp; opacity: 0.7;}.trash-can {&nbsp; background-color: red;&nbsp; color: #ffffff;&nbsp; padding: 2px 5px;}li {&nbsp; display: flex;}<!DOCTYPE html><html><head>&nbsp; <title>to-do list</title>&nbsp; <link rel="stylesheet" href="main.css" />&nbsp; <script src="https://kit.fontawesome.com/fe178342de.js" crossorigin="anonymous"></script></head><body>&nbsp; <div class="container">&nbsp; &nbsp; <div class="head">&nbsp; &nbsp; &nbsp; <h1>TO-DO LIST</h1>&nbsp; &nbsp; &nbsp; <h1 class="display">+</h1>&nbsp; &nbsp; </div>&nbsp; &nbsp; <input type="text" placeholder="Add New Todo" />&nbsp; &nbsp; <ul></ul>&nbsp; </div>&nbsp; <script src="main.js"></script></body></html>编辑：要修复::first-letter伪元素，您可以添加以下 css：li {&nbsp; display: flex;}