JavaScript change 事件

JavaScript change 事件是一种事件类型，当元素失去焦点时会触发。JavaScript 的 change 事件继承了 Event 的所有方法和属性。

在这里，我们将通过不同 JavaScript 元素（如输入文本框、复选框、单选按钮、select 元素等）的实际用法来理解和实现 change 事件。

要对 JavaScript 元素使用 change 事件，我们需要添加一个事件处理程序方法，为此我们可以使用 addEventListener() 或元素的 onChange 属性。两者的语法如下所示：

addEventListener() 方法

onChange 属性

我们将通过这两种方式讨论 JavaScript change 事件。

在输入元素上使用 JavaScript change 事件

对于不同的元素，有不同的输入类型，例如文本框、单选按钮或复选框。当您输入内容然后移动到另一个元素时，例如按下按钮或鼠标悬停在按钮上，change 事件就会起作用。但是，当我们在输入框中时，change 事件不起作用。让我们通过一些例子来看一下。

以下是一些例子，将帮助我们理解 change 事件的用法：

示例 1

在文本输入元素上使用 change 事件

上述代码的输出如下所示

当我们单击“Click me”按钮时，焦点会从文本框丢失，这意味着 change 事件将起作用。此外，我们可以看到当我们提供输入时，change 事件将不起作用。单击按钮后，文本会显示在标签中。

示例 2

使用 onChange 属性

输出

在上面的代码中，当我们键入一些文本到文本框时，onChange 事件获得焦点，但只要我们单击屏幕上的某个位置，onChange 属性就会起作用。

在单选按钮上使用 change 事件

在单选按钮的情况下，当我们选择任何一个单选按钮后，change 事件就会起作用。我们将在下面的代码中看到这一点。

上述代码的输出如下所示：

当我们单击任何一个单选按钮时，会显示指定的消失，这意味着在单击单选按钮时，焦点会从其上丢失。

在 select 元素上使用 change 事件

在 select 元素的情况下，当某个值的选择完成后，change 事件就会起作用。下面我们讨论了一个可以通过它来理解 select 元素在值上的工作方式的示例。

示例

输出

在上面的输出中，我们可以看到当我们从列表中选择一个值时，旁边会显示名称。这是因为当我们选择一个值，即选择完成后，change 事件就会起作用。但是，在我们进行选择的过程中，change 事件不起作用。