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

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

Answer 2

嗯，从es5的过去开始，我使用了一种旧的方法。如果您不太想知道方法分配何时失败，则可能对您有用。希望对您有帮助

function getUnSafe(val, alt) {
    /* returns alt if empty string or null or undefined, else the value
     * works good for undefined props of existing obj */
    if (val === false || val === 0) return val;
    if (!val || /^\s*$/.test(val)) return alt;
    return val;
}   
var dummy = {
    addEventListener:function(){}
};
getUnSafe(document.querySelector(".cookies__button"), dummy).addEventListener('click', addLocal);

Answer 3

我会使用adapter pattern

function addLocal(){
 cookies.classList.add("animate-out"); 
}

function onClick(query, listener) {
  const cookiesButton = document.querySelector(query);
  if (!cookiesButton) {
    return;
  }
  cookiesButton.addEventListener('click', listener);

  // in case you want to do some chaining
  return cookiesButton;
}

onClick('.cookies__button_1', addLocal);
onClick('.cookies__button_2', addLocal);
onClick('.cookies__button_3', addLocal);

Answer 4

 try {
   // ... Your code
 } catch(e) {
   console.log("You can safely ignore this:", e);
  // Failure is always an option. But lets just ignore it
 }

虽然确实可行，但最好将代码仅包含在需要/有效的页面上。

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

4 个答案: