抱歉,如果这是重复的,但在 www 上找到的答案没有回答我的具体问题,或者我只是缺乏找到正确答案的条款,如果是这样,我很乐意引导到正确的方向。 :)
我的问题是,我从 .json 文件中获取数组,类似于:
[
"Ben Berry",
"Susan Boile",
"Jerry Smith",
...
]
并制作它的本地变量副本,它将用于所有接下来的 script.js 工作。
让我们想象一下,这个列表是巨大的。
在 HTML 中,我使用无序列表中的列表元素动态显示所有这些元素。
现在,如果有人点击这些 li 之一,它应该从 DOM 中删除,并且该元素的局部变量副本也应该被删除。
这当然可以通过 li 标记内的 HTML 属性来完成 -> onclick=function()
但我觉得使用 addEventListener 方法更舒服。
通过使用 .forEach 循环整个数组并向每个 li 添加一个 eventListener,可以轻松地将这些监听器添加到每个监听器中。
但是,如果我现在按字母顺序、按名字或姓氏一遍又一遍地对列表进行排序,会发生什么情况。这将导致一遍又一遍地调用包含此 .forEach 循环的函数。
这个过程不会在内存中创建数十亿(没有双关语)事件监听器,这会成为性能问题吗?如果是这样,最好的程序是什么?
最佳答案
您可以做的不是向每个项目添加事件,而是将事件添加到项目的父项并查找单击了哪个项目。这是一个例子:
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>
关于javascript - 使用动态创建的 .addEventListener,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/52284562/