我们知道,在触发DOM上的某个事件时,会产生一个事件对象,其中包含与事件相关的所有信息。JS高程中有这样一句话,兼容DOM的浏览器会将一个事件对象传入到事件处理程序中,无论指定事件处理程序时使用什么方法,DOM0级或是DOM2级别,都会传入事件对象。
事件处理程序有参数时直觉上还好理解,但是事件处理程序要是一个参数都没有指定,事件对象真的会传入事件处理程序吗?
以一个按钮<input type="button" value="Click Me" id="myBtn">
为样本,我们可以看看是否真的如此。
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
对象是一个类数组对象,包含着传入函数中的所有参数,利用它,我们可以获得关于参数的信息。从结果可以看出,浏览器确实将一个事件对象传入到事件处理程序,即便事件处理程序没有指定任何参数。
下面,看看事件处理程序指定参数的情况。
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]。
**粗体** _斜体_ [链接](http://example.com) `代码` - 列表 > 引用
。你还可以使用@
来通知其他用户。