Javascript是一种事件驱动的编程语言，其中事件通常与用户交互相关。当用户执行某些操作时（例如单击按钮或窗口调整大小），浏览器会触发该操作的事件。这些事件可以被Javascript代码捕获并用于实现复杂的功能。
当一个事件被触发时，浏览器会创建一个事件对象，该对象包含与该事件相关的信息。在处理事件时，您可能需要访问这些信息。本文将介绍如何将事件对象传递给函数以便对其进行处理。
事件对象的结构
事件对象是一个Javascript对象，它包含有关事件的所有信息。以下是事件对象的一些重要属性：
- type - 表示事件类型的字符串（例如“click”或“resize”）。
- target - 触发事件的DOM元素。
- currentTarget - 当前正在处理事件的DOM元素。
- clientX和clientY - 鼠标指针相对于浏览器窗口可视区域左上角的位置。
- pageX和pageY - 鼠标指针相对于整个页面左上角的位置。
- keyCode - 表示按下的键（如果事件是键盘事件）的键码。
- preventDefault() - 可以取消事件的默认行为。
- stopPropagation() - 可以阻止事件冒泡到更高级别的DOM元素。
将事件对象传递给函数
要将事件对象传递给函数，您需要在HTML代码中使用事件处理程序。事件处理程序是一个Javascript函数，它在某个特定事件被触发时执行。
以下是一个示例HTML代码，其中包含一个按钮并定义了一个单击事件处理程序：
------- ------------------- ------------
--------
--- -------- - ------------------------------------
---------------------------------- --------------- -
-- ---------
---
---------在上面的示例中，我们使用了addEventListener()方法将单击事件处理程序绑定到按钮。该方法接受两个参数：要监听的事件类型和事件处理程序函数。在事件处理程序函数中，可以通过将event作为参数来访问事件对象：
---------------------------------- --------------- - ------------------------ -- ------- -------------------------- -- ------- ------------------- ------------ ---
在上面的示例中，我们访问了事件对象的type和target属性。
事件委托
当您需要在多个元素上处理相同类型的事件时，最好使用事件委托。事件委托是一种技术，它允许您将事件处理程序添加到父元素而不是每个子元素。
以下是一个示例HTML代码，其中包含一个列表并使用事件委托定义了单击事件处理程序：
--- ------------
-------- ------
-------- ------
-------- ------
-----
--------
--- ------ - ----------------------------------
-------------------------------- --------------- -
-- --------------------- --- ----- -
--------------------------------------
-
---
---------在上面的示例中，我们使用了addEventListener()方法将单击事件处理程序绑定到列表。当单击列表项时，事件会冒泡到列表元素，并且可以通过检查事件对象的target属性来确定单击的是哪个子元素。
总结
现在，您已经学习了如何在Javascript中将事件对象传递给函数并对其进行处理。通过理解事件对象的结构以及如何使用addEventListener()方法和事件委托，您可以编写更高效、更
来源：JavaScript中文网 ，转载请注明来源 本文地址：https://www.javascriptcn.com/post/26039