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确保存在某些以吸收addEventListener引用和调用。

Answer 3

您必须确保该元素存在。所以

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

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

addEventListener（）到不存在的元素？

3 个答案: