javascript - 使用 javascript queryselectorall 而不是 jquery 选择器

Question

我想用纯JavaScript重写这个jQuery:

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

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

在尝试弄清楚之后，我得到了这样的结果:

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

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

但它仅适用于 ul 的第一个 anchor 。

当我尝试使用querySelectorAll('.gallery a')时，它什么也不做。

我是 JavaScript 新手。有人可以帮我解决一下吗？

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

您需要处理来自 querySelectorAll() 的类似数组的节点列表:

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

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