à l'aide javascirpt queryselectorall au lieu du sélecteur jquery

Question

Je veux réécrire cette jQuery dans le plus pur JavaScript:

var gallery1 = $('.gallery a'); 

gallery1.click(function(event){ 
    event.preventDefault(); 
    console.log('onclick'); 
}); 

Après avoir essayé de le comprendre j'ai fini avec quelque chose comme ceci:

var gallery = document.querySelector('.gallery a'); 

gallery.onclick = function(event){ 
    event.preventDefault(); 
    console.log('onclick'); 
}; 

Mais cela ne fonctionne qu'avec la première ancre du ul.

Lorsque j'essaie d'utiliser querySelectorAll('.gallery a'), il ne fait rien. Je suis nouveau à JavaScript. Quelqu'un peut-il m'aider à le comprendre?

HTML

<ul class="gallery" id="gallery"> 
    <li class=""> 
     <a href="img/gallery/gallery1.jpg" class="" id="anchor"> 
      <img src="img/gallery/gallery1.jpg" alt="image 1" class="img"> 
     </a> 
    </li> 
    <li class=""> 
     <a href="img/gallery/gallery2.jpg" class=""> 
      <img src="img/gallery/gallery2.jpg" alt="image 1" class="img"> 
     </a> 
    </li> 
    <li class=""> 
     <a href="img/gallery/gallery3.jpg" class=""> 
      <img src="img/gallery/gallery3.jpg" alt="image 1" class="img"> 
     </a> 
    </li> 
    <li class=""> 
     <a href="img/gallery/gallery4.jpg" class=""> 
      <img src="img/gallery/gallery4.jpg" alt="image 1" class="img"> 
     </a> 
    </li> 
    <li class=""> 
     <a href="img/gallery/gallery5.jpg" class=""> 
      <img src="img/gallery/gallery5.jpg" alt="image 1" class="img"> 
     </a> 
    </li> 
</ul> 

Answer 1

Vous devez gérer la nodelist semblable à un tableau de querySelectorAll():

var gallery = document.querySelectorAll('.gallery a'); 

gallery.forEach(function(item) { 
    item.onclick = function(event){ 
    event.preventDefault(); 
    console.log('onclick'); 
    }; 
});