如何将JavaScript事件侦听器添加到无序列表的第一个元素

我只是想用html5和javascript创建一个无序的列表，我想向这个列表元素添加事件，比如第一个元素

这是我的名单

<ul class="aside__list">
 <li class="one">Kutomba kuma</li>
 <li class="two">Kutomba tako</li>
 <li class="three">Kutomba mkundu</li>
 <li class="four">Kutomba malaya</li>
</ul>



 var parentElements = document.getElementsByClassName('aside__list');
  for (var i=0; i<parentElements.length; i++) {

    parentElements[i].addEventListener('click', doStuff, false);
    console.log(parentElements[i]);
}

function doStuff() {
  alert('Delete me');
}

库托巴库马
Kutomba tako
Kutomba mkundu
马来亚库通巴

var parentElements=document.getElementsByClassName（'aside_uulist'）；
对于（var i=0；i将侦听器添加到列表的第一个子项
li
，而不是添加到整个
。除了列表
：


document.querySelector（'.aside\u list li:first child'）。addEventListener（'click'，doStuff'）；
函数doStuff（）{
log（'Delete me'）；
}

库托巴库马
Kutomba tako
Kutomba mkundu
马来亚库通巴
将侦听器添加到列表的第一个子项
中，而不是添加到整个
。除了列表
：


document.querySelector（'.aside\u list li:first child'）。addEventListener（'click'，doStuff'）；
函数doStuff（）{
log（'Delete me'）；
}

库托巴库马
Kutomba tako
Kutomba mkundu
马来亚库通巴
您可以使用：

document.querySelector('ul.aside__list li').addEventListener('click', doStuff);

这与第一个
li
相匹配，因此您不需要包括
：第一个孩子
您可以使用：

document.querySelector('ul.aside__list li').addEventListener('click', doStuff);

这与第一个
li
相匹配，因此您不需要包括
：第一个孩子
这将适用于任何数量的
ul。除了列表
：


[…document.querySelectorAll（'.aside\uu list'）].forEach(
ul=>ul.firstElementChild.addEventListener（'click'，doStuff）
);
函数doStuff（）{
log（'Delete me'）；
}

库托巴库马
Kutomba tako
Kutomba mkundu
马来亚库通巴


库托巴库马
Kutomba tako
Kutomba mkundu
马来亚库通巴


库托巴库马
Kutomba tako
Kutomba mkundu
马来亚库通巴
这将适用于任何数量的
ul。除了列表
：


[…document.querySelectorAll（'.aside\uu list'）].forEach(
ul=>ul.firstElementChild.addEventListener（'click'，doStuff）
);
函数doStuff（）{
log（'Delete me'）；
}

库托巴库马
Kutomba tako
Kutomba mkundu
马来亚库通巴


库托巴库马
Kutomba tako
Kutomba mkundu
马来亚库通巴


库托巴库马
Kutomba tako
Kutomba mkundu
马来亚库通巴
半相关，
：第一个孩子不应该是必需的，因为
查询选择器只匹配一个元素。半相关，
：第一个孩子不应该是必需的，因为
查询选择器只匹配一个元素。为什么不干脆
查询选择器all（“.撇开列表li”）
？最终结果是一样的，它避免了获取整个列表。@jhpratt，因为这样会选择每个列表中的所有列表项。哎呀，在列表的末尾加上一个
：第一个子项
。你能解释一下为什么选择使用
foreach
而不是问题所建议的
for loop
吗？因为它更具可读性，不需要索引变量，允许您访问迭代的元素，而无需使用笨拙的
元素[i]
语法。为什么不干脆
querySelectorAll（'.aside\u list li'）
？最终结果是一样的，它避免了获取整个列表。@jhpratt，因为这样会选择每个列表中的所有列表项。哎呀，在列表的末尾加上一个
：第一个子项
。你能解释一下为什么选择使用
foreach
而不是问题所建议的
for loop
吗？因为它更具可读性，不需要索引变量，允许您在不使用笨拙的
元素[i]
语法的情况下访问迭代的元素。您的代码犯了一个典型的性能错误，不仅仅是使用
.getElementsByClassName（）
，但通过引用它在循环内返回的活动节点列表。有关解释，请参阅。您的代码犯了一个典型的性能错误，不仅是因为使用了
.getElementsByCassName（）
，还因为引用了它在循环内返回的活动节点列表。有关解释，请参阅。