javascript - 使用动态创建的 .addEventListener

Question

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

我的问题是，我从 .json 文件中获取数组，类似于:

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

并制作它的本地变量副本，它将用于所有接下来的 script.js 工作。

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

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

现在，如果有人点击这些 li 之一，它应该从 DOM 中删除，并且该元素的局部变量副本也应该被删除。

这当然可以通过 li 标记内的 HTML 属性来完成 -> onclick=function() 但我觉得使用 addEventListener 方法更舒服。

通过使用 .forEach 循环整个数组并向每个 li 添加一个 eventListener，可以轻松地将这些监听器添加到每个监听器中。

但是，如果我现在按字母顺序、按名字或姓氏一遍又一遍地对列表进行排序，会发生什么情况。这将导致一遍又一遍地调用包含此 .forEach 循环的函数。

这个过程不会在内存中创建数十亿(没有双关语)事件监听器，这会成为性能问题吗？如果是这样，最好的程序是什么？

Answer 1

您可以做的不是向每个项目添加事件，而是将事件添加到项目的父项并查找单击了哪个项目。这是一个例子:

function setupListListener ()
{
  // Get the list
  const list = document.querySelector( 'ul' );
  
  // Add click event
  list.addEventListener( 'click', () => {
    
    // Get the clicked element
    let target = event.target;
    
    // If it is not an item, return
    if ( target.nodeName !== 'LI' ) return;
    
    // Do something with the item li
    console.log( 'Item : ', target );
  
  });
}

// Usage example
setupListListener();

*
{
  padding: 0;
  margin: 0;
  box-sizing: border-box;
}

ul
{
  width: 150px;
  list-style: none;
  border: 1px dashed #000;
}

li
{
  width: 90%;
  height: 25px;
  display: flex;
  justify-content: center;
  align-items: center;
  margin: 10px auto;
  border: 1px solid #000;
  cursor: pointer;
}

<ul>
  <li>Item</li>
  <li>Item</li>
  <li>Item</li>
  <li>Item</li>
  <li>Item</li>
  <li>Item</li>
</ul>