目录

  1. 参考资料

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绑定了一个没有指定任何参数的事件处理程序,点击按钮后,控制台依次输出Clicked1clickarguments对象是一个类数组对象,包含着传入函数中的所有参数,利用它,我们可以获得关于参数的信息。从结果可以看出,浏览器确实将一个事件对象传入到事件处理程序,即便事件处理程序没有指定任何参数。
下面,看看事件处理程序指定参数的情况。

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;

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


参考资料

Copyright © 2021 DukeLuo Blog

Powered by Hexo • Theme Candelas