javascript - 避免 "Cannot read property ' addEventListener' of null 的最佳方法”

Question

我在下面有一段代码，当我在下一页并且该元素不在该页面的 HTML 中时，我应该如何避免无法读取 null 的属性“addEventListener”。

const cokiesButton = document.querySelector(".cookies__button");
loadEventListeners();
function loadEventListeners() {
 cokiesButton.addEventListener('click', addLocal);
}
function addLocal(){
 cookies.classList.add("animate-out"); 
}

我应该这样做吗？

if(cokiesButton){
 cokiesButton.addEventListener('click', addLocal);
}

但这似乎不是将所有这些事件包装在 if 语句中的好解决方案。

有什么比这更好的想法吗？

Answer 1

if 语句的替代方法是 && 运算符。换句话说，您也可以这样做:

cokiesButton && cokiesButton.addEventListener('click', addLocal);

仅当左侧不为假时，右侧才会执行。 但我应该记住，这比 if 语句更难理解，因此您应该谨慎使用它。