addEventListener()对不存在的元素会怎样？

Question

我已经在一个元素上添加了一个click事件监听器，例如：

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

该元素可能来自服务器端的生成或不生成。

因此，如果服务器生成了该元素，则一切正常，但如果没有生成，则会出现错误，如下所示：

无法读取null的addEventListener属性

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

- Ram Patra

---

var el = document.querySelector('.class-name'); if (el) { el.addEventListener(...); }这段代码的意思是首先按照给定的CSS类名查询文档中第一个匹配的元素，然后检查该元素是否存在。如果存在，就向该元素添加事件监听器。 - dfsq

...或事件委托。 - Álvaro González

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的引用和调用。

- Alnitak

---

如果你真的想避免临时变量，我建议使用 try-catch。 - dfsq

@dfsq 是的，你可以这样做，尽管代码会更长。是否有意地抛出异常在这种情况下是否更好则是值得商榷的。 - Alnitak

Answer 2

自ES2020版本开始

ES2020引入了可选链(Optional chaining)，该功能正是您在此需要的：

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

支持所有现代最新的浏览器。

- Janghou

Answer 3

在执行操作之前，请先检查您的元素是否存在（例如在注释中）：

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
});

- Clément Andraud

---

有没有更好的方法？ - Ram Patra

所以你基本上只是复制粘贴了我的评论？ :) - dfsq

@dfsq 他回答的方式。 - Mritunjay

没问题。既然答案和我想回答的一样，我不能不点赞它，对吧？ :) - dfsq

仅仅为了避免代码中的一个测试而改变DOM结构，这听起来对我来说是一个非常糟糕的想法... - Alnitak

Answer 4

你需要确保元素存在。所以：

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

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

- Server Khalilov

---

我想补充一点，如果查找DOM元素时使用的不是querySelector，请检查它返回的内容。例如，getElementsByClassname总是返回一个空的HTMLCollection。在这种情况下，需要再次检查element.length > 0。 - Robert Wildling