JavaScript事件监听器闭包工作原理：带参数且可访问event对象

我最近碰到一个需求：想让JavaScript中的点击处理函数，既能接收自己定义的多个参数，又能正常访问浏览器的event对象。后来找到了可行的实现方案，测试验证过没问题，但一开始完全摸不透它的原理，今天就来好好拆解下这个逻辑。

实现方案：用闭包嵌套函数解决问题 #

核心思路是通过闭包的特性，用外层函数接收自定义参数，返回一个内层函数作为实际的点击事件回调——这个内层函数专门用来接收浏览器传递的event对象。

原理拆解 #

这背后其实是JavaScript闭包的功劳：

• 当我们调用外层函数（比如createClickHandler(customData)）时，它会把传入的自定义参数存在自己的作用域里；
• 外层函数返回的内层函数，因为闭包的特性，即使外层函数执行完毕，依然能访问到外层作用域里的自定义参数；
• 而内层函数作为点击事件的回调函数，浏览器在触发事件时，会自动把event对象作为参数传递给它，这样我们就能同时拿到自定义参数和event了。

完整示例代码 #

// 获取目标元素
const div = document.querySelector('div');
// 自定义参数
const customData = "这是我要传递的自定义数据";

// 外层函数：接收自定义参数
const createClickHandler = function (data) {
  // 内层函数：作为实际的事件回调，接收event对象
  return function (event) {
    console.log("浏览器事件对象：", event);
    console.log("自定义参数：", data);
    // 这里可以同时使用event和data做逻辑处理
  }
}

// 绑定点击事件：调用外层函数传入自定义参数，得到内层函数作为回调
div.addEventListener('click', createClickHandler(customData));

这样绑定后，当你点击div元素时，控制台就会同时打印出浏览器的event对象和你传入的自定义参数啦～

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