反应事件简介：
JavaScript可以响应的动作称为事件。例如：即使您单击一个按钮，然后单击该按钮也是一个事件。单击按钮后，该按钮将要执行的任务由事件处理程序分配。
其他常用事件如下：
- 点击一个元素
- 提交表格
- 滚动页面
- 悬停元素
因此，有关事件的基本思路很明确。使用JavaScript的开发人员必须熟悉这些术语，以使他们理解起来并不困难也不陌生。因此，基本上，事件是可以触发的某种操作，可能是用户操作或系统生成的事件的结果。事件示例如下：加载网页，单击鼠标，调整窗口大小，按下键以及更多的交互称为事件。
反应中的事件处理：
使用React元素处理事件与处理DOM元素上的事件非常相似。有一些语法上的差异：
- 反应元素使用camelCase命名，而不是小写。
- 使用JSX，您可以传递一个函数作为事件处理程序，而不是一个字符串。
- 在React中我们无法返回 假 为了防止 默认 行为。我们必须打电话 preventDefault 事件明确显示，即在开发应用程序时以oi = ur自己的代码编写它，以防止出现默认行为。
在HTML中，我们编写事件如下：
<按钮onclick =“ handleClick（）”>Click Me</button>
在React中，我们编写事件如下：
<按钮onClick = {handleClick}>Click Me</button> //作为功能组件
<按钮onClick = {this.handleClick}>Click Me</button> //作为类组件
一个人不能回来 假 防止React的默认行为。我们必须打电话 preventDefault 明确地。例如：
在HTML中：
<a href =“＃” onclick =” console.log（'Clicked。'）;返回假”> Click me </a>
在React中：
函数handleClick（e）{
e.preventDefault（）;
console.log（点击）。
}
<a href =“＃” onClick = {handleClick}> Click me </a>
如果事件由React处理，则称为 综合事件。 合成事件实际上是浏览器本地事件的跨界包装。
就像在任何其他框架中一样，在React中，如果没有事件处理程序，我们将无法创建令人惊叹的，响应式和交互式的Web应用程序，该应用程序将在每次触摸时对用户做出响应。事件处理是React的一个非常重要的部分，因为它可以确保React跟踪用户执行的每个动作。这些操作可能包括调整窗口大小，滚动浏览页面，甚至单击链接都由事件处理程序处理和检测。
反应事件列表：
下面的事件处理程序由冒泡阶段中的事件触发。为了为捕获阶段注册一个事件处理程序，例如，将Capture附加到事件名称之后：代替使用onClick，我们必须使用onClickCapture来处理捕获阶段的click事件。事件属性称为 onClick 传递给称为 clickHandler。
-
剪贴板事件：
- onCopy
- onCut
- onPaste
-
作文事件：
- onCompositionEnd
- onCompositionStart
- onCompositionUpdate
-
键盘事件：
- onKeyDown
- onKeyPress
- onKeyUp
-
焦点事件：
- 焦点
- onBlur
-
表单事件：
- onChange
- onInput
- onInvalid
- onSubmit
-
鼠标事件：
- onClick
- onContextMenu
- onDoubleClick
- onDrag
- onDragEnd
- onDragEnd
- onDragEnter
- onDragExit
- onDragOver
- onDragLeave
- onDragStart
- onDrop
- onMouseDown
- onMouseEnter
- onMouseLeave
- onMouseMove
- onMouseOut
- onMouseOver
- onMouseUp
-
指针事件：
- onPointerDown
- onPointerMove
- onPointerUp
- onPointerCancel
- onGotPointerCapture
- onLostPointerCapture
- onPointerEnter
- onPointerLeave
- onPointerOut
- onPointerOver
-
选拔活动：
- onSelect
-
触摸事件：
- onTouchCancel
- onTouchEnd
- onTouchMove
- onTouchStart
-
UI事件：
- onScroll
-
车轮事件：
- onWheel
-
媒体活动：
-
- onAbort
- onCanPlay
- onCanPlayThrough
- onDurationChange
- 暂停
- onPlay
- onPlaying
- onProgress
- onRateChange
- 寻求
- 寻求
- 停转
- onSuspend
- onTimeUpdate
- onVolumeChange
- 正在等待
- 图片事件：
- 负载
- onError
- 动画事件：
- onAnimationStart
- onAnimationEnd
- onAnimationIteration
-
过渡事件：
- onTransitionEnd
-
其他活动：
- onToggle
综合事件：
对于每个事件，React还会创建一个 综合事件 可以传递给回调函数或事件处理程序，也可以包含事件的详细信息。
定义事件：
为了在JSX中定义事件，我们需要添加camelCased事件以及相应的事件处理程序或回调函数，作为表示React元素的JSX属性之一：
那里的括号用于将那些事件连接到它们各自的事件属性。但是，它们不会在DOM中创建内联事件。
将参数传递给事件处理程序
最常见的是，开发人员希望在循环内将额外的参数传递给事件处理程序。例如：让我们假设 ID 是行ID，则可以使用以下任何一种方法：
上面的两行是等效的并且可以互换，并且两者都使用
Function.prototype.bind 以及 Arrow 功能。在上述两种情况下， e 那里代表一个React事件的对象将作为第一个参数之后的第二个参数传递 ID。 虽然使用箭头功能，我们需要显式传递它，但是我们可以看到 捆绑 与结合使用时，任何其他自变量都会自动转发。
我们在应用程序中可以看到的大多数行为都围绕事件。事件可以通过多种方式触发，我们构建应用程序以监听事件，以便为事件做其他事情。根据事件的JavaScript经验，在处理事件时可能会感到很自在，但是React具有一种非常不同且独特的事件处理方式。 反应并没有直接针对DOM事件，而是将它们包装在自己的事件包装器中，但稍后可以讨论。现在让我们看看如何实际创建，添加和监听React事件。
创建事件：
让我们首先创建一个具有输入和按钮的表单。此后，输入值时必须触发一个事件，并且该按钮的用途是调用将反转该值的函数。应该包括的内容是：
- 该字段是空的输入字段，允许用户输入文本。
- 当用户在输入中输入值时，需要触发onChange事件。为此，我们需要调用函数：handleChange（）。此功能用于为输入设置新状态。
- 当单击“反向文本”按钮时，必须触发另一个事件。这次我们需要调用函数：handleReverse（）。设置反向文本的新状态需要此功能。
侦听组件事件：
我们知道我们只能监听DOM元素上的事件。在本文的开头，我们已经谈到了这个主题，但是我们知道React的组件是DOM元素的包装器，这意味着我们已经有了一个侦听事件所需的传递层。克服这种障碍的方法将通过事件
处理程序作为子组件的道具，然后，该道具作为属性传递给click事件。
添加事件监听器：
在某些时候，我们可能想利用某些DOM事件，这些事件在安装组件时触发。当我们希望在每次调整窗口大小时都看到窗口的宽度时，可以举一个resize事件的例子。如果我们要创建一个组件并进行尝试，则需要添加事件侦听器：handleResize（）和我们拥有的事件类型。然后，在安装组件时将添加事件侦听器，这意味着我们制作的组件正在积极侦听浏览器窗口，并且在更新组件时将显示宽度。
结论：
我们已经对React事件的各个方面进行了相当多的介绍，但是涉及到使用React开发的广阔空间。在这里，我们还了解到，React并不直接连接到DOM事件，而是有一些为DOM事件包装的Synthetic事件。我们还深入研究了创建新事件监听器的过程，以便将它们附加到全新的Synthetic事件上，并确保从那里开始，当这些特定事件被触发时，组件将得到更新。本文涵盖了初学者级别所需的所有关于React事件的必要主题，还涵盖了一些概念，这些概念将帮助您提高理解水平。希望本文对您有所帮助，并且您可以使用React开发出色的应用程序。