Even when the page is loaded, there is also an event triggered by the web browser.
The onkeyup event allows the user to handle the events for the derived classes. Methods Having this event helps the application efficiently handle the event without attaching any delegates.
This event is triggered just after the onkeypress event, thus it can be bind with the onkeypress event to perform some actions. If the key is not released, this event will not be triggered. This event does not depend on the key type. So, it can be triggered using any of the keys regardless of whether it is alphabet, numeric, or any special symbol.
Using the onkeyup with the Object
In the above example, we need to define the object first, and then we can perform any task by calling a function.
Let's understand it with the below code:
Specifying the event listener using the addEventListener() method on the object. Consider the below code:
In the above example, we use an event listener to trigger a specified event. There are three parameters that have their specific meaning. Let's understand these parameters before proceeding further.
We have passed three arguments which are event, function, and usecapture. The third parameter useCapture, is an optional parameter. Its default value is false).
event: It specifies event type, so it will be an onkeyup event for our case.
function: The function is a custom function that can perform the desired operation on each "key up" event.
useCapture: The useCapture is an optional parameter, and normally we don't use it. It is a boolean data type that has a true or false value. If its value is true, it indicates an event bubbling or capturing, and by default, it has a false data value.
Consider the below example:
The onkeyup event does not return anything. It just calls a user-defined function. We can specify any action in this function as per our requirement.
It does not throw any exception for exception handling and works fine in every case unless there is no syntax error in the applied function.
Let's understand it with some examples:
Consider the below example:
On pressing the key in input1:
On pressing the key in input2:
From the above output, we can see two different outputs as we have used two different inputs for handling the keyup event.
In the above example, we used both syntax styles to demonstrate their work. We have created two different inputs and defined two different functions where we are accessing the element by their id. In both functions, we are providing an alert with some specific message. Here, both input is connected with the onkeyup event. As the user presses any key and releases it, we will get the alert message with the specific message to display by which approach it is being displayed.
We can easily perform any action on an element by accessing it using the DOM methods and trigger it onkeyup event handler.
The very common use of this event is to modify the user input, for example: changing lowercase alphabet letters to uppercase or vice-versa. There may be many other scenarios where we must trigger the onkeyup event. We can follow the above-discussed approach for every case.