javascript - addEventListener() 到不存在的元素？

Question

我已附上 click元素上的事件监听器，例如:

document.querySelector('.class-name').addEventListener('click', function () {

});

该元素可能会或可能不会从服务器端生成。

因此，如果服务器生成元素，那么一切正常，但如果不是，那么我会收到如下错误:
Cannot read property 'addEventListener' of null
我知道为什么会发生这种情况，但我想知道是否有更好的方法将事件监听器附加到不会产生此类错误的元素？

Answer 1

如果没有某种条件测试，就无法做到这一点，但与 if 相比，您可以节省一些字符。阻止:

var el = document.querySelector('.class-name');
el && el.addEventListener(...);

我不相信有任何简单的方法可以避免临时变量(但见下文)。

注意:包含以下内容只是为了表明它是可能的，不应被解释为建议；-)

如果这是您的 HTML 和 JS 中非常常见的模式，一种避免临时分配给 el 的方法这是:

var missing = {
  addEventListener: function() {};
};  // a "null" element

(document.querySelector('.className') || missing).addEventListener(...);

这个想法是 || missing确保有东西可以吸收 addEventListener引用和调用。