关于addEventListener方法中匿名函数参数与console.log输出事件机制的技术问询

咱们一步一步拆解这三种写法的运行逻辑，核心就搞懂浏览器怎么给事件回调传参数：

1. 带参数x的写法（正常输出事件对象） #

document.addEventListener("keydown", function(x) {
    console.log(x); // 输出KeyboardEvent实例
});

这是标准的事件监听用法：当keydown事件触发时，浏览器会自动创建一个包含当前事件所有信息的KeyboardEvent对象，然后把这个对象作为第一个参数，自动传递给你的回调函数。

你给这个参数起名叫x，只是给它起了个名字而已——换成e、evt、myEvent都完全一样，本质都是浏览器传进来的事件实例。所以console.log(x)自然就打印出这个键盘事件的详情了。

2. 无参数但用event的写法（能输出但不推荐） #

document.addEventListener("keydown", function() {
    console.log(event); // 同样输出KeyboardEvent实例
});

这是早期浏览器（比如IE）遗留的特性，现在大部分现代浏览器还兼容，但属于不规范的写法：

当事件触发时，浏览器会在全局作用域（也就是window对象）上挂载一个event属性，指向当前的事件对象。所以哪怕你没给回调函数定义参数，直接访问event（其实是window.event）也能拿到事件数据。

不过这种写法有坑：比如在嵌套函数或者严格模式下可能失效，而且不符合ES规范的标准写法，所以现在更推荐第一种显式接收参数的方式。

3. 无参数且用x的写法（报错） #

document.addEventListener("keydown", function() {
    console.log(x); // 抛出ReferenceError
});

这个报错原因很直白：x这个变量在当前作用域（包括全局作用域）里根本没被定义过！

既不是回调函数的参数（你没写参数），也不是你在别的地方声明的变量，JS引擎找不到它，自然就抛出Uncaught ReferenceError: x is not defined的错误了。

总结一下：事件回调的第一个参数是浏览器自动传入的事件对象，名字随便起；event是全局遗留变量，不推荐用；没定义的变量直接用肯定报错。

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