如何避免通用JS文件中addEventListener在无对应DOM时触发空对象错误

你遇到的报错是因为当页面不存在id="quote"的表单元素时，document.querySelector('#quote')会返回null，直接在null上调用addEventListener方法就会抛出类型错误。

方案1：显式判断元素是否存在（新手推荐，兼容性最好） #

先判断获取到的元素不为空，再执行事件绑定逻辑，对原有代码改动极小，所有浏览器都兼容：

const formQuote = document.querySelector('#quote');
// 仅当元素存在时才绑定事件
if (formQuote !== null) {
  formQuote.addEventListener('submit', (event) => {
    // 保留你原有的提交逻辑代码即可
  });
}

方案2：用可选链操作符简化写法 #

如果不需要兼容特别老旧的浏览器（比如IE），可以用ES2020新增的可选链语法?.简化代码，逻辑和显式判断完全一致：

const formQuote = document.querySelector('#quote');
formQuote?.addEventListener('submit', (event) => {
  // 原有提交逻辑
});

可选链会在左侧值为null/undefined时直接终止表达式执行，不会调用后续的方法，自然不会触发报错。

方案3：封装通用函数（多绑定场景推荐） #

如果你后续还有多个类似的跨页面元素绑定需求，可以封装个通用的事件绑定函数，避免重复写判断逻辑：

/**
 * 给指定元素绑定事件，元素不存在时自动跳过
 * @param {string} selector 元素选择器
 * @param {string} eventName 事件名称
 * @param {Function} handler 事件处理函数
 */
function addListenerIfExist(selector, eventName, handler) {
  const element = document.querySelector(selector);
  element?.addEventListener(eventName, handler);
}

// 调用示例
addListenerIfExist('#quote', 'submit', (event) => {
  // quote表单提交逻辑
});
addListenerIfExist('#other-form', 'submit', (event) => {
  // 另一个表单的提交逻辑
});

内容的提问来源于stack exchange，提问作者w461