addEventListener() 到不存在的元素？

Question

我在一个元素上附加了一个click事件侦听器，例如：

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

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

因此，如果服务器生成元素，那么一切正常，但如果不是，那么我会收到如下错误：

Cannot read property 'addEventListener' of null

我知道为什么会发生这种情况，但我想知道是否有更好的方法将事件侦听器附加到不会产生此类错误的元素？

Answer 1

只需检查您的元素是否在此处（如评论中）：

var el = document.querySelector('.class-name');
if (el) { el.addEventListener(...); }

编辑：您还可以将元素.class-name包装到div中并执行类似的操作：

document.getElementById("myDiv").addEventListener("click",function(e) {
    var classes = e.target.className;
    if(classes = ".class-name")
        //DO SOMETHING
});

Answer 2

没有某种条件测试就没办法做到这一点，但是与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 || missing确保存在吸收addEventListener引用和调用的东西 。

Answer 3

你必须确保元素存在。 所以

var element = document.querySelector('.class-name');

if (element)
   element.addEventListener('click', function () {});

Answer 4

从 ES2020 开始

ES2020 引入了可选链，这个特性正是你需要的：

document.querySelector('.class-name')?.addEventListener('click', ()=> console.log("Clicked"));

在所有现代最新浏览器中均受支持。