Javascript: Выбор списка из UL

Question

var ul = document.getElementById("parent-list"); 
 
document.querySelectorAll("#parent-list li").onclick = function() { 
 

 
    alert('click!'); 
 

 
}

<ul id="parent-list"> 
 
    <li id="item-1">Item 1</li> 
 
    <li id="item-2">Item 2</li> 
 
    <li id="item-3">Item 3</li> 
 
    <li id="item-4">Item 4</li> 
 
    <li id="item-5">Item 5</li> 
 
    <li id="item-6">Item 6</li> 
 
    <li id="item-7">Item 7</li> 
 
    <li id="item-8">Item 8</li> 
 
    <li id="item-9">Item 9</li> 
 
</ul>

Я пытаюсь получить предупреждение всплывающее окно элемента щелкнул, когда я нажимаю на элемент «LI» только с помощью JavaScript. Я знаю, как это сделать в jquery, но я не могу понять, как это сделать с помощью javascript.

скрипку: https://jsfiddle.net/7jcksznz/1/

Answer 1

querySelectorAll возвращает коллекцию HTML. Вам нужно будет присоединить событие к каждому из них. Вам нужно будет перебрать коллекцию.

var lis = document.querySelectorAll("#test li"); 
 
for (var i = 0; i < lis.length; i++) { 
 
    lis[i].addEventListener("click", function() { 
 
    console.log(this.innerHTML); 
 
    }); 
 
}

<ul id="test"> 
 
    <li>1</li> 
 
    <li>2</li> 
 
    <li>3</li> 
 
</ul>

Лучшим вариантом является добавление один щелчок на UL и использовать это событие, чтобы определить, какой Ли была нажата.

document.getElementById("test").addEventListener("click", function(event) { 
 
    var li = event.target; 
 
    console.log(li.innerHTML); 
 
});

<ul id="test"> 
 
    <li>1</li> 
 
    <li>2</li> 
 
    <li>3</li> 
 
</ul>

Answer 2

document.querySelectorAll("#parent-list li") get a collection of HTMLElement,so,you can do like this： 
window.onload = function() 
    { 
     var ul = document.getElementById("parent-list"); 

     ul.onclick = function(e) 
     { 
      if(e.target.tagName = "LI") 
      { 
       alert(1); 
      } 
     } 

    } 

Answer 3

querySelectAll возвращает массив узлов. вам нужно перебирать узлы, чтобы добавить список событий.

var ul = document.getElementById("parent-list"); 
var li_items = document.querySelectorAll("#parent-list li"); 
for (var i = 0 ; i < li_items.length ; i++) 
    li_items[i].onclick = function(){alert(this.id);} 

Answer 4

Используйте событие-слушатель целенаправленный по каждому элементу, а не непосредственно Назначив функцию OnClick к NamedNodeMap.

/* get an array of list items */ 
var items = Array.prototype.slice.call(
     document.querySelectorAll('li[id|="item"]') 
); 

/* add event-listener to each item */ 
items.forEach(function(item) { 
    item.addEventListener('click', clickAlert, false); 
}); 

/* click function */ 
function clickAlert(evt) { 
    alert(evt.target.id +' clicked!'); 
} 

См:

• Array.prototype.slice
• Array.prototype.forEach
• eventTarget.addEventListener
• NamedNodeMap