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

Cciradih 发布于2019-08-22 18:15 / 3258人阅读

摘要：上面代码，使用级的方法为按钮绑定了一个没有指定任何参数的事件处理程序，点击按钮后，控制台依次输出。从结果可以看出，浏览器确实将一个事件对象传入到事件处理程序，即便事件处理程序没有指定任何参数。

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

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

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]。

参考资料

JavaScript高级程序设计

GPU云服务器云服务器事件处理程序 js事件处理程序在一个c语言程序中 DOM事件

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/yun/95653.html

DOM 事件深入浅出（一）

摘要：本文就将带大家深入浅出地了解事件的那些属性和方法。针对不同级别的，我们的事件处理方式也是不一样的。当然其优点是不需要操作来完成事件的绑定。文章地址事件深入浅出二。在项目开发时，我们时常需要考虑用户在使用产品时产生的各种各样的交互事件，比如鼠标点击事件、敲击键盘事件等。这样的事件行为都是前端DOM事件的组成部分，不同的DOM事件会有不同的触发条件和触发效果。本文就将带大家深入浅出地了解...

macg0406 2019-08-20 11:31 评论0 收藏0
【重温基础】20.事件

摘要：本文是重温基础系列文章的第二十篇。事件捕获为截获事件提供机会，然后实际的目标接收到事件，最后事件冒泡，对事件作出响应。事件处理事件处理，即响应某个事件。包括导致事件的元素事件类型等其他信息。本文是重温基础系列文章的第二十篇。这是第三个基础系列的第一篇，欢迎持续关注呀！重温基础系列的【初级】和【中级】的文章，已经统一整理到我的【Cute-JavaScript】的Java...

Blackjun 2019-08-26 13:28 评论0 收藏0
DOM事件流与事件委托

摘要：事件流与事件委托事件，即文档或浏览器中发生的一些特定交互的瞬间，我们可以利用事件监听来预定事件，当事件发生的时候执行相应的处理程序。本文主要讨论事件流的三个阶段，及利用事件委托机制进行性能优化。事件流与事件委托事件，即文档或浏览器中发生的一些特定交互的瞬间，我们可以利用事件监听来预定事件，当事件发生的时候执行相应的处理程序。当事件发生在某个DOM节点上时，事件在DOM结构中进行一级...

chaos_G 2019-08-20 11:19 评论0 收藏0
前端小知识--JavaScript事件流

摘要：事件事件指可以被侦测到的行为。事件通常与函数配合使用，当事件发生时函数才会执行。两家公司对于事件流出现了截然相反的定义。级事件规定的事件流包括三个阶段事件捕获阶段处于目标阶段事件冒泡阶段。我们又把事件处理程序称为事件侦听器。 JavaScript事件流 0.DOM级别与DOM事件首先在介绍DOM事件之前我们先来认识下DOM的不同级别。针对不同级别的DOM，我们的DOM事件处理方式也是...

Taste 2019-08-26 11:43 评论0 收藏0
Event Handler 事件处理程序 1 ---《高程3》

摘要：为属性赋值匿名函数事件作用域使用级方法指定的事件处理程序被认为是元素的方法。最后这个布尔值参数如果是，表示在捕获阶段调用事件处理程序如果是，表示在冒泡阶段调用事件处理程序。事件捕获和事件冒泡 DOM2级事件规定的事件流包括三个阶段：事件捕获、处于目标阶段和事件冒泡。首先发生的是事件捕获，从外部节点到内部节点依次遍历，为截获事件提供了机会。然后是实际的目标接收到事件。最后一个阶段是冒泡...

WalkerXu 2019-08-20 11:31 评论0 收藏0