javascript - 将事件监听器添加到使用 javascript 创建的

Question

我对在 JS 中操作 DOM 中的元素还很陌生，所以我创建了一个简单的待办事项列表，以便更加舒适，我可以在其中使用输入添加项目，并通过单击列表项目删除项目。虽然这可能不是最佳实践和限制，但我只是想使用创建和删除元素而不是使用对象或类，直到我更加熟悉，也使用普通/普通 js，所以请在回答时记住这一点。

我正在尝试添加一个删除 <li> 的点击事件当<li>被点击。

我的逻辑是……加载页面后，我不能只对所有 <li> 运行 for 循环s 并将事件处理程序添加为所有 <li>还不存在。所以我尝试的解决方案是当触发 addTaskButton 事件时，我们得到所有 <li>在事件发生时在页面上，我们遍历所有这些并向 <li> 添加一个事件监听器在单击时等待删除的。

这似乎行不通，而且可能过于复杂。

有人可以像我才 5 岁一样简单地向我解释为什么这不起作用，或者有什么更好的方法可以做到这一点？

提前谢谢你

HTML

<ul id="taskList">
    <li>example</li>

</ul>
<input type="text" id="addTaskInput">
<button id="addTaskButton">Add Task</button>

JavaScript

const taskList = document.querySelector("#taskList");
const addTaskInput = document.querySelector("#addTaskInput");
const addTaskButton = document.querySelector("#addTaskButton");
let taskItem = document.querySelectorAll("li");


addTaskButton.addEventListener("click", () => {
    let taskItem = document.createElement("li");
    taskItem.textContent = addTaskInput.value;
    for (let i = 0; i < taskItem.length; i++) {     
        taskItem[i].addEventListener("click", () => {
            let taskItem = document.querySelectorAll("li");
            taskList.removeChild(taskItem[i]);      
        });
    }
    taskList.appendChild(taskItem);
    addTaskInput.value = " ";
});

Answer 1

这是我根据您的要求创建的代码，它在普通 javascript 中实现了 jQuery $(document).on 机制，现在无论您在文档中创建一个 li，单击该 li 它将被删除。

解释

它所做的是在单击文档时检查单击了哪个元素(e.target 是被单击的元素，e 是文档上的单击事件)，然后检查被单击的项目是否是 li 标签(例如。如果项目被点击，target.tagName 会告诉我们标签名称)，所以如果它是一个 li 就删除它；

	const taskList = document.querySelector("#taskList");
	const addTaskInput = document.querySelector("#addTaskInput");
	const addTaskButton = document.querySelector("#addTaskButton");


	addTaskButton.addEventListener("click", () => {
	    let taskItem = document.createElement("li");
	    taskItem.textContent = addTaskInput.value;
	    taskList.appendChild(taskItem);
	    addTaskInput.value = " ";
	});

	document.onclick = function(e)
	{
	  if(e.target.tagName == 'LI'){
	     e.target.remove();
	   }
	}

<ul id="taskList">
    <li>example</li>

</ul>
<input type="text" id="addTaskInput">
<button id="addTaskButton">Add Task</button>