Обработка событий / захват

Question

Я хочу прикрепить прослушиватель событий исключительно в Javascript к HTML-тегу "ul", чтобы при щелчке по любому "li" в предупреждении отображалось значение соответствующего "li":

<ul>
    <li>A<li/>
    <li>B<li/>
    <li>C<li/>
</ul>

Если щелкнуть мышью на A, он должен предупредить A, то же самое для B и C

Answer 1

var list = document.querySelector("#list");
list.addEventListener("click", function(ev) {
  if (ev.target !== list) console.log(ev.target.textContent);
  // console is easier to test than alert(ev.target.textContent);
});

<ul id="list">
  <li>A</li>
  <li>B</li>
  <li>C</li>
</ul>

Answer 2

Вы можете выбрать ul с помощью getElementById и связать его с событием onclick.Проверьте JSFiddle

Answer 3

Получите все li nodes и добавьте click events к каждому nodes.

var lis =  document.getElementById("div").getElementsByTagName("li")
for(var i=0;i<lis.length;i++){
 lis[i].addEventListener('click', function(e){
      alert(e.target.textContent);
   })

}

// As if you want to have single click event on ul itself

document.getElementById("ul").addEventListener('click', function(e){
      alert(e.target.textContent);
   })

ul li {
  background: #cce5ff;
  margin: 5px;
  cursor:pointer;
}

<div id="div">
<ul >
  <li>A</li>
  <li>B</li>
  <li>C</li>
</ul>
</div>

 <p> As if you want to have single click event on ul itself</p>
<hr>

<ul id="ul">
  <li>X</li>
  <li>Y</li>
  <li>Z</li>
</ul>

Answer 4

document.querySelectorAll('li')
  .forEach(item =>
    item.addEventListener('click',
      () => alert('Item clicked')
    )
  );

li {
  cursor: pointer;
}

li:hover {
  background: lightgrey;
}

<ul>
  <li>Item 1</li>
  <li>Item 2</li>
</ul>

Вы должны пройтись по всем <li/> элементам в списке и присоединить к ним eventListener .

См. Пример кода, чтобы узнать, как он работает.