Javascriptを：私はJavaScriptで「LI」要素をクリックしたとき、私はアイテムの警告ポップアップを持ってしようとしている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>

から選択リストをクリック。私はjQueryで行う方法を知っていますが、私はjavascriptでそれを行う方法を理解できません。

フィドル：https://jsfiddle.net/7jcksznz/1/

Answer 1

HTMLコレクションを返しますquerySelectorAll。それぞれにイベントを添付する必要があります。コレクションをループする必要があります。

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上でワンクリックを追加し、クリックされたリチウムを決定するためにイベントを使用することです。ノードの配列を返すquerySelectAll

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

。 イベントリスナーを追加するにはノードを反復処理する必要があります。

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