What are the events in Javascript? How does the event function work?

Events in Js

Every time when you interact with the webpage an interaction will occur we called Event. In this article, we will see the types of events handled in Javascript, and how the event function works.

An event is something that happens when the user interacts with the web page, such as when he clicked a link or button, entered text into an input box, made a selection in a select box, pressed a key on the keyboard, or moves the mouse pointer, or submits the form, etc.

There are other events that the browser triggers, like page load, unload, etc. Events are a part of the Document Object Model (DOM) and every HTML element contains a set of events that can trigger JavaScript Code.

We have different types of events available in Javascript like when a user clicks a button, that click is also an event, same as if we press the keyboard keys, then that keypress too an event.

Let’s discuss more on the Event handlers:


Types of Javascript Events

The events can be categorized into four main groups:

  1. Mouse Events
  2. Keyboard Events
  3. Form Events
  4. Document/Window Events

Here we will see a few examples to understand the relation between Events and JavaScript.

1. Mouse Events

onclick event:

This event is triggered when the user clicks on any element on a webpage. It can be the link, form button, etc. You can handle click events with an onclick event handler.

For example, The below example will show you an alert after clicking on the button

click me
alert
onmouseover event:

The mouseover event occurs when a user moves the mouse pointer over an element. We can handle this event by using onmouseover handler in the element.

onmouseout event:

This event is just the reverse of the mouseover event, it occurs when a user moves out the mouse pointer from the element. We can handle this event by using onmouseout handler in the element.

2. Keyboard Events

onkeydown:

This event is a keyboard event and it executes instructions whenever a key is pressed down.

We can handle the key-down event with the onkeydown event handler.

onkeyup:

It executes instructions whenever a key is released after pressing.

We can handle the key-up event with the onkeyup event handler.

onkeypress:

This event occurs when the key is pressed down on the keyboard that has a character value associated with it. For example – ctrl, shift, alt, arrow keys, ESC, etc. these keys will not generate the keypress event. But it will trigger onkeyup & onkeydown events.

We can handle the key press event with the onkeypress event handler.

3. Form Events

A form event is fired when a form control receives or loses control or the user modifies the form control values such as by typing some text, selecting the value from a list, submitting the form, etc.

We will talk about the most used form events below:

onchange:

This event detects when the user changes the value of any form element.

We can handle the change event with the onchange event handler.

onfocus:

The focus event occurs when the user gives focus to an element on a web page.

We can handle the focus event with the onfocus event handler. The following example will highlight the border of text input in brown color when it receives the focus.

focus
After focusing on input
onblur:

This event occurs when the user takes the focus away from the form element or window.

We can handle the event with the onblur event handler. The following example will remove the border of text input when it loses focus.

onsubmit:

This event will be triggered when we submit the form on the webpage. This will take all the input values by default and will submit them to the server or whatever action has been taken.

We can handle the submit event with the onsubmit event handler.

4. Document/Window Events

Here are some useful events that are triggered on the page loa or when the user resizes the window. Let’s have a look at the most used events below:

onload:

This event is triggered when the page is loaded completely in the web browser.

Let’s understand with the example:

onunload:

This event is triggered when a user leaves the current web page by closing the tab or window.

For example:

onresize:

This event occurs when a user resizes the browser window. The resize event also occurs in situations when the browser window is minimized or maximized.

For example:

Conclusion

So, these all are the events that have specific handlers to trigger the events. One thing that you need to note is that the HTML attribute is not case-sensitive which means you can write in the uppercase, and camelcase also. (like onClick, ONCLICK).

But the function name inside the event is case-sensitive, so you have to make sure after using the events on the elements.


So, these are some of the most frequently used events in JavaScript and their function working. With this, we have come to the end of our article. I hope you understood what are events and how they are used.

For more such content keep following and subscribing to this page. Please reach out to us in the comment section or drop us an email, and we will surely help you in clearing doubts.

Thanks 😉 Happy Learning.

Also, read

Share
What are the events in Javascript? How does the event function work? [7] Advanced and Useful Linux – Ubuntu Commands How to revert or undo last commit in Git? Explain For, While, Do-While Loops in JS and more Setup AWS CLI on MAC, Windows, and Linux Introduction to Comparison and Logical Operators in JS Difference between AWS, AZURE, and GCP Cloud