Question

我只是想用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');
}

我想使用for循环将事件添加到列表的第一个元素，而不使用类或id，现在此事件适用于列表中的每个列表元素，

要获得我想要的东西我需要改变什么？

Answer 1

您可以使用：

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

这与第一个li相匹配，因此您不需要包括:first-child。

Answer 2

将侦听器添加到列表的第一个子项li中，而不是添加到整个.aside__list中：

document.querySelector('.aside__list li:first-child').addEventListener('click', doStuff);

function doStuff() {
  console.log('Delete me');
}

<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>

如注释所述，:first-child伪选择器不是必需的，因为querySelector仅返回第一个匹配元素，尽管这可能会使代码的意图有所不同更清晰。

Answer 3

这将适用于任意数量的ul.aside__list：

[...document.querySelectorAll('.aside__list')].forEach(
  ul => ul.firstElementChild.addEventListener('click', doStuff)
);

function doStuff() {
  console.log('Delete me');
}

<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>
<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>
<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>

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

3 个答案: