Javascript 使用动态创建的.addEventListener'；s

很抱歉，如果这是重复的，但www上找到的答案没有回答我的具体问题，或者我只是缺少找到正确答案的条件，如果是这样，我很乐意被引导到正确的方向。：）

我的问题是，我从.json文件中获取一个数组，类似于以下内容：

[
    "Ben Berry",
    "Susan Boile",
    "Jerry Smith",
    ...
]

并为其创建一个局部变量副本，该副本将用于所有下一个script.js工作

让我们也想象一下，这个列表是巨大的

在我的HTML中，我使用无序列表中的列表元素动态显示所有这些元素

现在，如果有人单击其中一个li，它应该从DOM中删除，元素的局部变量副本也应该删除

当然，这可以通过li标记中的HTML属性来完成->

onclick=function（）

，但是我觉得使用addEventListener方法更舒服

通过使用.forEach在整个数组中循环，并向每个li添加一个eventListener，可以很容易地将这些侦听器添加到每个li中

然而，如果我现在按字母顺序，按名字或姓氏，一次又一次地对列表排序，会发生什么呢。这将导致反复调用包含This.forEach循环的函数

---

这个过程会不会在内存中创建数十亿（没有双关语）EventListener，这会成为性能问题？如果是这样的话，最好的方法是什么？

使用onclick是90年代后期的遗留JS，因此您偏爱

addEventListener

解决方案是件好事：您最初的想法很好，但将侦听器添加到文档中，而不是每个li中，然后检查是哪个元素生成了事件：

const ulElement = document.getElementByIdOrsomeCSSQueryOrSomething(...);

...

document.addEventListener("click", evt => {
  // Only do things if the event source is an <li>, which we know
  // is the case if its parent node is our <ul> element:
  if (evt.target.parentNode === ulElement) {

    // remove the name from the list...
    let name = evt.target.textContent;
    removeName(name);

    // ... and remove the <li> from the DOM
    ulElement.removeChild(evt.target);

  }
});

constulement=document.getElementByIdOrsomeCSSQueryOrSomething（…）；
...
document.addEventListener（“单击”，evt=>{
//仅当事件源是我们知道的
时才执行操作
//如果其父节点是我们的
元素，则为这种情况：
if（evt.target.parentNode==ulElement）{
//从列表中删除该名称。。。
让name=evt.target.textContent；
removeName（姓名）；
//…并从DOM中删除

ulElement.removeChild（evt.target）；
}
});

---

（或者，您也可以将单击处理添加到列表本身，但是如果您想要将整个列表交换进/出，这段代码只需要更新条件，而不是在页面上显示/隐藏列表时添加和删除事件侦听器）

使用onclick是90年代后期的遗留JS，因此，您偏爱

addEventListener

解决方案是件好事：您最初的想法很好，但将该侦听器添加到文档中，而不是每个li中，然后检查哪个元素生成了事件：

const ulElement = document.getElementByIdOrsomeCSSQueryOrSomething(...);

...

document.addEventListener("click", evt => {
  // Only do things if the event source is an <li>, which we know
  // is the case if its parent node is our <ul> element:
  if (evt.target.parentNode === ulElement) {

    // remove the name from the list...
    let name = evt.target.textContent;
    removeName(name);

    // ... and remove the <li> from the DOM
    ulElement.removeChild(evt.target);

  }
});

constulement=document.getElementByIdOrsomeCSSQueryOrSomething（…）；
...
document.addEventListener（“单击”，evt=>{
//仅当事件源是我们知道的
时才执行操作
//如果其父节点是我们的
元素，则为这种情况：
if（evt.target.parentNode==ulElement）{
//从列表中删除该名称。。。
让name=evt.target.textContent；
removeName（姓名）；
//…并从DOM中删除

ulElement.removeChild（evt.target）；
}
});

---

（或者，您也可以将单击处理添加到列表本身，但如果您想要将整个列表交换入/出，此代码只需要更新条件，而不是在页面上显示/隐藏列表时添加和删除事件侦听器）

您可以做的是，不向每个项目添加事件，将事件添加到项目的父级，并查找单击的项目。以下是一个例子：

函数setupListListener（）
{
//获取列表
const list=document.querySelector（'ul'）；
//添加单击事件
list.addEventListener（'单击'，（）=>{
//获取单击的元素
让target=event.target；
//如果不是项目，则返回
if（target.nodeName！='LI'）返回；
//对物品做些什么
日志（'Item:'，target）；
});
}
//用法示例
setupListListener（）
*
{
填充：0；
保证金：0；
框大小：边框框；
}
保险商实验室
{
宽度：150px；
列表样式：无；
边框：1px虚线#000；
}
锂
{
宽度：90%；
高度：25px；
显示器：flex；
证明内容：中心；
对齐项目：居中；
利润率：10px自动；
边框：1px实心#000；
光标：指针；
}

项目
项目
项目
项目
项目
项目
您可以做的不是向每个项目添加事件，而是将事件添加到项目的父项，然后查找单击的项目。以下是一个例子：


函数setupListListener（）
{
//获取列表
const list=document.querySelector（'ul'）；
//添加单击事件
list.addEventListener（'单击'，（）=>{
//获取单击的元素
让target=event.target；
//如果不是项目，则返回
if（target.nodeName！='LI'）返回；
//对物品做些什么
日志（'Item:'，target）；
});
}
//用法示例
setupListListener（）
*
{
填充：0；
保证金：0；
框大小：边框框；
}
保险商实验室
{
宽度：150px；
列表样式：无；
边框：1px虚线#000；
}
锂
{
宽度：90%；
高度：25px；
显示器：flex；
证明内容：中心；
对齐项目：居中；
利润率：10px自动；
边框：1px实心#000；
光标：指针；
}

项目
项目
项目
项目
项目
项目
只要小心
中是否有其他元素……它们可能会成为目标汉克，甚至没有想到这一点！但是如果addEventListeners是通过我的方法创建的，那么会有性能问题吗？很抱歉，我选择了另一个答案作为解决方案