Javascript 差异btw（JS）addEventListener（'；单击'；，函数（）{}）和（jQuery）。单击（）？

我正在做一个响应性的下拉列表。我为桌面版和手机版做了两个下拉列表。问题是，当我使用属性“display:none；”初始化移动版本下拉列表时，绑定到它的addEventListener抛出错误

userinfoBtnMobile.addEventListener('click',function() {
        const userinfoDropdownStyle = window.getComputedStyle(userinfoDropdownMobile);
        const userinfoDropdownDisplayValue = userinfoDropdownStyle.getPropertyValue('display');

        if(userinfoDropdownDisplayValue === 'none') {
            userinfoDropdownMobile.style.display = 'block';
        } else {
            userinfoDropdownMobile.style.display = 'none';
        }
    });

下面是浏览器控制台中显示的错误

Uncaught TypeError: Cannot read property 'addEventListener' of null

但是，当我将其更改为使用jQuery时，这个错误消失了。（请忽略内部逻辑。它在逻辑上执行相同的功能。）

因此，我假设“addEventListener”似乎是在display属性的div值变为“block”之前触发的，它在定位时会找到“null”，而jQuery的.click（）是在特定的“click”事件触发时触发的，这样它就不会抛出任何错误。是这样吗

---

这两种方法的区别是什么？

jQuery的

。单击

返回jQuery集合

。可以对jQuery集合调用click

，以向所有匹配的元素添加事件侦听器。如果没有匹配的元素，则不会抛出错误；只是没有任何元素会被迭代

但是

querySelector

不返回集合，而是返回单个元素，即找到的第一个与选择器匹配的元素。如果没有找到元素，它将返回

null

在本例中，当调用

addEventListener

时，似乎在DOM中找不到与选择器匹配的元素

要更全面地复制jQuery的逻辑，请使用

querySelectorAll

：

for (const element of document.querySelectorAll('some-selector')) {
  element.addEventListener('click', function() {
  });
}

如果用此代码替换原始代码，则不会抛出任何错误（但是，与所有版本一样，不会选择任何元素，因此不会附加任何单击侦听器）

这就是为什么

addEventListener

抛出jQuery的

。单击
不会抛出，但是脚本仍然不起作用，因为当脚本运行时，您想要的元素在DOM中不存在。要解决此问题，请仅在填充DOM后运行脚本：将脚本放入外部文件中，并为其指定
defer
属性

<script src="path-to-script" defer></script>



（见附件）

<script src="path-to-script" defer></script>