如何遍历无序列表以获得LI元素的innerText的console.log

Question

我需要创建一个事件侦听器，该事件侦听器在用户单击HTML中的列表项之一时触发。该操作应调用一个名为listItemText的函数，该函数返回被单击的列表项的innerText，即：如果他们单击首先，它应该记录““狗”

我已经尝试了所有可以想到的方法来获取被单击的li项目的正确对应的innerText。 充其量，我可以将整个列表放回console.log或列表的最后一个元素。

在这一点上，我已经尝试了很多事情，以至于无法回忆。 下面的代码或多或少是我尝试过的一种变体

  <ul id="todo-app">
      <li class="item">Walk the dog</li>
      <li class="item">Pay bills</li>
      <li class="item">Make dinner</li>
      <li class="item">Code for one hour</li>
  </ul>

var targetUl = document.getElementById('todo-app').childNodes;

this.addEventListener('click', listItemText);

function listItemText(event) {
  var liClicked = event.target;

  for (i=0; i<targetUl.length; i++) {
    if (liClicked == 'LI') {
      console.log(targetUl[i].innerText)
    }
  } 
}

我希望获得li标签的文本内容，但此时我仍处于未定义状态。 帮助将不胜感激。

Answer 1

如果我正确理解，则需要单击li元素的文本的console.log ，因此我想您可以尝试以下代码：

 var targetUl = document.getElementById('todo-app').addEventListener("click",listItemText); function listItemText(event) { var liClicked = event.target; if(liClicked && liClicked.nodeName == "LI"){ console.log(liClicked.textContent) } } 

 <ul id="todo-app"> <li class="item">Walk the dog</li> <li class="item">Pay bills</li> <li class="item">Make dinner</li> <li class="item">Code for one hour</li> </ul> 

这是事件委托的原理，您不需要在所有元素上都附加事件侦听器，而只需在父节点上附加事件侦听器，如果事件发生了，它将冒泡到父节点并使用event.target可以单击的子元素的引用。

Answer 2

我现在终于弄清楚了。 这样做稍有不同，但最终还是相同的想法。 难以理解event.target及其工作方式。 这是我的答案-先生，这几乎与您的答案相同：

var toDoList = document.getElementById("todo-app");
toDoList.addEventListener('click', listItemText);

function listItemText(e) {
  console.log(e.target.innerText);
  return e.target.innerText;
}