您好，我需要为我的网络集成课程做一个灯箱广告。 我只是很讨厌一件小事情，当我尝试从addEventListener调用一个函数时，这表明它不是一个函数。

这是我的代码：`

   <div class="grille">
    <img class="active" src="img-squirrel/squirrel-1.jpg" alt="Squirrel"><img
         src="img-squirrel/squirrel-2.jpg" alt="Squirrel"><img
         src="img-squirrel/squirrel-3.jpg" alt="Squirrel"><img
         src="img-squirrel/squirrel-4.jpg" alt="Squirrel"><img
         src="img-squirrel/squirrel-5.jpg" alt="Squirrel"><img
         src="img-squirrel/squirrel-6.jpg" alt="Squirrel"><img
         src="img-squirrel/squirrel-7.jpg" alt="Squirrel"><img
         src="img-squirrel/squirrel-8.jpg" alt="Squirrel"><img
         src="img-squirrel/squirrel-9.jpg" alt="Squirrel"><img
         src="img-squirrel/squirrel-10.jpg" alt="Squirrel"><img
         src="img-squirrel/squirrel-11.jpg" alt="Squirrel"><img
         src="img-squirrel/squirrel-12.jpg" alt="Squirrel"><img
         src="img-squirrel/squirrel-13.jpg" alt="Squirrel"><img
         src="img-squirrel/squirrel-14.jpg" alt="Squirrel"><img
         src="img-squirrel/squirrel-15.jpg" alt="Squirrel"><img
         src="img-squirrel/squirrel-16.jpg" alt="Squirrel"><img
         src="img-squirrel/squirrel-17.jpg" alt="Squirrel">
</div>
<script>
    (function () {
        "use strict";
        var lightBox = document.querySelectorAll("img");
        console.log(lightBox);
        lightBox.addEventListener("click",function(){

            this.classList.toggle('active');
        });


    }());
</script>

当我在var行而不是querySelector上放置querySelectorAll时，出现错误。

为什么要这么做？