JavaScript onkeyup 事件

在 JavaScript 中，与 HTML 元素的交互是通过事件处理的。这些事件可以是用户事件或浏览器事件。由于某些浏览器或用户的交互或活动而导致对象状态发生的任何变化都称为事件。HTML 元素支持许多事件。例如，如果我们单击任何元素、更改输入值或移动鼠标光标；这些都是事件。

即使在页面加载时，Web 浏览器也会触发一个事件。

JavaScript 的 onkeyup() 事件与其他事件（如 click、mouseover 等）一样。当用户按下键盘上的任何键并释放该键（按键抬起）时，就会触发此事件。这就是为什么它被称为 onkeyup 事件。此事件在用户释放键盘按键后立即触发。此事件独立于按键类型，并以类似的方式适用于所有按键。通过在 if 条件块中检查其类型，我们可以将此事件绑定到某些特定的按键类型。

onkeyup 事件允许用户处理派生类的事件。拥有此事件的方法可以帮助应用程序有效地处理事件，而无需附加任何委托。

此事件在 onkeypress 事件之后立即触发，因此它可以与 onkeypress 事件绑定以执行某些操作。如果按键未释放，则不会触发此事件。此事件不依赖于按键类型。因此，无论它是字母、数字还是任何特殊符号，都可以使用任何按键触发。

JavaScript onkeyup 事件的语法

我们可以通过两种不同的方式使用 JavaScript onkeyup 事件。有两种不同的语法来使用它。

使用带对象的 onkeyup

我们可以通过使用 JavaScript 对象来使用 onkeyup 事件。它的工作方式如下：

在上面的示例中，我们需要先定义对象，然后可以通过调用函数来执行任何任务。

让我们通过下面的代码来理解它

使用 addEventListener() 方法在对象上指定事件监听器。考虑以下代码：

在上面的示例中，我们使用事件监听器来触发指定的事件。有三个参数具有特定含义。在继续之前，让我们先了解这些参数。

我们传递了三个参数：event、function 和 usecapture。第三个参数 useCapture 是一个可选参数。它的默认值为 false。

event：指定事件类型，所以对于我们的情况，它将是 onkeyup 事件。

function：函数是一个自定义函数，可以在每次“按键抬起”事件时执行所需的操作。

useCapture：useCapture 是一个可选参数，我们通常不使用它。它是一个布尔数据类型，具有 true 或 false 值。如果其值为 true，则表示事件冒泡或捕获，默认值为 false。

考虑下面的示例

onkeyup 事件不返回任何内容。它只是调用一个用户定义的函数。我们可以根据需要在此函数中指定任何操作。

它不会为异常处理抛出任何异常，并且在所有情况下都能正常工作，除非应用的函数中存在语法错误。

让我们通过一些例子来理解它

JavaScript onkeyup 事件的示例

当用户按下任何键并释放它时，JavaScript onkeyup 事件会被触发。我们可以根据需要在此点执行各种操作。让我们通过一个简单的示例来理解这一点，我们将向用户显示一个警报消息。

考虑下面的示例

Test.html

输出

在 input1 中按下按键时

在 input2 中按下按键时

从上面的输出中，我们可以看到两个不同的输出，因为我们使用了两个不同的输入来处理 keyup 事件。

在上面的示例中，我们使用了两种语法风格来演示它们的工作。我们创建了两个不同的输入并定义了两个不同的函数，我们通过 id 访问元素。在这两个函数中，我们都提供了带有特定消息的警报。这里，两个输入都与 onkeyup 事件连接。当用户按下任何键并释放它时，我们将收到带有特定消息的警报，显示它是由哪个方法显示的。

总结

JavaScript onkeyup 事件是一种用户交互类型的事件，意味着当用户按下键盘上的任何键并释放该键（按键抬起）时，它就会被触发。这就是为什么它被称为 onkeyup 事件。

我们可以通过使用 DOM 方法访问元素，并在 onkeyup 事件处理程序上触发它，从而轻松地对元素执行任何操作。

此事件最常见的用途是修改用户输入，例如：将小写字母转换为大写，反之亦然。在必须触发 onkeyup 事件的场景可能有很多。我们可以为每种情况遵循上面讨论的方法。