addEventListener直接传回调与套匿名函数调用回调的差异是什么？

核心行为区别 #

• 写法1：document.addEventListener('DOMContentLoaded', function() { callback() });
  事件触发时执行的是包裹用的匿名函数，再由匿名函数主动调用callback：
  • 不会自动给callback传入事件对象，除非你手动写function(e) { callback(e) }
  • callback内部的this指向全局对象（非严格模式下是window，严格模式下是undefined）
• 写法2：document.addEventListener('DOMContentLoaded', callback);
  直接把callback注册为事件回调，由浏览器触发执行：
  • 会自动给callback传入DOMContentLoaded对应的事件对象作为第一个参数
  • callback内部的this指向绑定事件的document对象

封装时用匿名函数包裹回调的原因 #

你贴的on_load封装用这种写法，主要是为了保证执行逻辑的一致性，常见的使用场景包括：

• 统一调用形态：这个封装里回调有两种执行时机：DOM未加载完时进事件队列延迟执行、DOM已加载完时同步直接执行。如果直接把f传给addEventListener，延迟执行时f会拿到事件对象、this指向document；同步执行时f没有参数、this指向全局对象，两种场景行为不一致。用匿名函数包裹后，两种场景都是手动调用f()，行为完全统一，调用方不需要感知执行时机的差异。
• 自定义参数传递：如果需要给回调传入自定义参数，不需要依赖事件对象的场景下，用匿名函数包裹可以灵活控制传入的参数，避免回调意外接收到事件对象导致逻辑错误。
• 固定上下文指向：如果回调内部依赖特定的this上下文，用匿名函数配合闭包可以固定this指向，不会被事件绑定的默认this规则覆盖。
• 插入通用逻辑：可以在调用回调前后插入通用的埋点、异常捕获、参数校验等逻辑，不需要修改每个业务回调的实现。

选型建议 #

• 如果回调本身就是事件处理函数，需要用到事件对象，也能接受默认的this指向，直接传回调函数即可，写法更简洁。
• 如果回调是通用业务函数，对参数、this指向有明确要求，或者需要做统一封装，就选择匿名函数包裹的写法。

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