前端

DOM中事件处理程序的第一个参数？

我们知道，在触发DOM上的某个事件时，会产生一个事件对象，其中包含与事件相关的所有信息。JS高程中有这样一句话，兼容DOM的浏览器会将一个事件对象传入到事件处理程序中，无论指定事件处理程序时使用什么方法，DOM0级或是DOM2级别，都会传入事件对象。

事件处理程序有参数时直觉上还好理解，但是事件处理程序要是一个参数都没有指定，事件对象真的会传入事件处理程序吗？
以一个按钮<input type="button" value="Click Me" id="myBtn">为样本，我们可以看看是否真的如此。

1
2
3
4
5
6
7
var btn = document.getElementById("myBtn");
function showMessage() {
  console.log("Clicked");
  console.log(arguments.length);
  console.log(arguments[0].type);
}
btn.onclick = showMessage;

上面代码，使用DOM0级的方法为按钮myBtn绑定了一个没有指定任何参数的事件处理程序，点击按钮后，控制台依次输出Clicked、1、click。arguments对象是一个类数组对象，包含着传入函数中的所有参数，利用它，我们可以获得关于参数的信息。从结果可以看出，浏览器确实将一个事件对象传入到事件处理程序，即便事件处理程序没有指定任何参数。
下面，看看事件处理程序指定参数的情况。

1
2
3
4
5
6
7
8
var btn = document.getElementById("myBtn");
function showMessage(event) {
  console.log("Clicked");
  console.log(arguments.length);
  console.log(arguments[0] === event);
  console.log(event.type);
}
btn.onclick = showMessage;

点击按钮后，控制台依次输出Clicked、1、true、click。从结果可以得出，传入一个参数时，该参数名成为arguments[0]的别名，参数和arguments[0]指向同一个对象。因为是别名，所以传入的参数名可以是任何合法的标识符，之所以使用标识符event，是因为它更能表意，也是大家默认的习惯。
现在，可以得出结论了，无论指定事件处理程序时使用什么方法，事件处理程序始终有一个参数，也就是事件对象，由浏览器传入，保存在arguments[0]。

参考资料