javascript - 避免“无法读取null的属性'addEventListener'”的最佳方法

我在下面有一个代码，当我在下一页上并且元素不在该页面的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语句中的好方法。

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

最佳答案

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

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

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