处理"Cannot read property 'addEventListener' of null"错误的最优方案

一、jQuery是怎么做到“元素不存在也不报错”的？ #

其实jQuery的事件绑定逻辑（比如on()方法）内部做了一层安全兜底处理：
当你调用$('.non-exist').on('click', function(){})时，jQuery会先把选择器对应的DOM元素包装成一个类数组对象——如果这个对象是空的（也就是元素不存在），它就直接跳过后续的事件绑定流程，不会执行任何可能触发报错的DOM操作。
简单来说，jQuery把元素集合的判断逻辑封装在了方法内部，哪怕集合为空，调用它的方法也只会静默返回，不会抛出错误。

二、优化原生JS大量if判断的实用技巧 #

针对你现在写的这种重复判断元素存在再绑定事件的代码，这里有几个能让代码更简洁优雅的优化方向：

1. 封装通用的安全事件绑定函数 #

把“判断元素存在+绑定事件”的逻辑抽成一个复用函数，彻底告别重复的if判断：

function safeBindEvent(selectorOrEl, eventName, handler, options) {
  // 兼容选择器字符串和直接传入的DOM元素
  const elements = typeof selectorOrEl === 'string' 
    ? document.querySelectorAll(selectorOrEl) 
    : [selectorOrEl];
  
  elements.forEach(el => {
    el && el.addEventListener(eventName, handler, options);
  });
}

// 使用示例
safeBindEvent('#el', 'click', swapper);
safeBindEvent('#another_el', 'click', swapper);

不管元素是否存在，都不用手动写判断，函数内部帮你搞定所有逻辑。

2. 用ES6+可选链简化单元素判断 #

如果你的项目环境支持ES6+语法，直接用?.可选链操作符就能一行搞定：

document.getElementById('el')?.addEventListener('click', swapper);
document.getElementById('another_el')?.addEventListener('click', swapper);

?.会自动检测前面的元素是否为null/undefined，如果是就直接终止后续调用，完全不会报错，比写if简洁太多。

3. 事件委托（更适合动态元素场景） #

如果你的元素是动态生成的，或者有大量同类型元素需要绑定事件，事件委托是最优解——不用给每个元素单独绑定，把事件绑定到它们的共同父元素上即可：

// 假设#parent是el和another_el的共同父节点
document.getElementById('parent').addEventListener('click', function(e) {
  // 判断触发事件的元素是否是目标元素
  if (e.target.matches('#el, #another_el')) {
    swapper.call(e.target, e); // 确保this指向触发事件的元素
  }
});

这种方式不仅不用判断子元素是否存在，还能自动处理后续动态添加的元素，同时减少页面上的事件绑定数量，性能更优。

4. 统一管理目标元素选择器 #

把需要绑定事件的元素选择器统一放到数组里，循环处理：

const targetElements = ['#el', '#another_el'];
targetElements.forEach(selector => {
  document.querySelector(selector)?.addEventListener('click', swapper);
});

后续新增需要绑定事件的元素时，只需要往数组里加选择器就行，代码维护起来更省心。

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