addEventListener(‘click’，函数(){})和(jQuery).click()？

Question

我要负责任地降下来。我为桌面版和移动版制作了两个下拉-div。问题是，当我用属性“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的错误时，此错误将消失。(请忽略内部逻辑。它在逻辑上执行相同的功能。)

userinfoBtnMobile.click(function() {
        if(userinfoDropdownMobile.is(':visible')) {
            userinfoDropdownMobile.slideUp();
        } else {
            userinfoDropdownMobile.slideDown();
        }
    })

因此，我假设，由于'addEventListener‘是在div的显示属性值转换为'block’之前触发的，它在目标锁定时会找到'null‘，而jQuery的.click()则是在特定的'click’事件触发器时触发的，这样就不会抛出任何错误。是那么回事吗？

两种方式有什么区别？

Answer 1

jQuery的.click返回一个jQuery集合。

可以在.click集合上调用jQuery，以便将事件侦听器添加到所有匹配的元素。如果没有匹配的元素，则不会抛出错误；只是没有任何元素恰好被迭代。

但是querySelector不返回集合，而是返回一个元素，第一个元素与选择器匹配。如果没有找到任何元素，它将返回null。

在这种情况下，在调用addEventListener时，DOM中似乎找不到匹配选择器的元素。

要更完整地复制jQuery的逻辑，请使用querySelectorAll

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

如果用此替换原始代码，则不会引发错误(但是，与所有版本一样，不会选择任何元素，因此不会附加单击监听器)。

这就是为什么addEventListener抛出但jQuery的.click没有-但是脚本仍然没有功能，因为当脚本运行时，您想要的元素并不存在于DOM中。要解决这个问题，只需在DOM填充之后运行脚本:将脚本放入外部文件并赋予它defer属性。

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

(见this question)