JavaScript Events
Last Updated : 17 Mar 2025
The change in the state of an object is known as an Event. In html, there are various events which represents that some activity is performed by the user or by the browser. When javascript code is included in HTML, js react over these events and allow the execution. This process of reacting over the events is called Event Handling. Thus, js handles the HTML events via Event Handlers.
For example, when a user clicks over the browser, add js code, which will execute the task to be performed on the event.
Event Handler Uses:
It can be used directly within HTML elements by adding special attributes to those elements. They can also be used within the <script> tags or in external JavaScript files.
Some of the HTML events and their event handlers are:
Mouse events:
| Event Performed | Event Handler | Description |
|---|---|---|
| click | onclick | When mouse click on an element |
| mouseover | onmouseover | When the cursor of the mouse comes over the element |
| mouseout | onmouseout | When the cursor of the mouse leaves an element |
| mousedown | onmousedown | When the mouse button is pressed over the element |
| mouseup | onmouseup | When the mouse button is released over the element |
| mousemove | onmousemove | When the mouse movement takes place. |
Keyboard events:
| Event Performed | Event Handler | Description |
|---|---|---|
| Keydown & Keyup | onkeydown & onkeyup | When the user press and then release the key |
Form events:
| Event Performed | Event Handler | Description |
|---|---|---|
| focus | onfocus | When the user focuses on an element |
| submit | onsubmit | When the user submits the form |
| blur | onblur | When the focus is away from a form element |
| change | onchange | When the user modifies or changes the value of a form element |
Window/Document events
| Event Performed | Event Handler | Description |
|---|---|---|
| load | onload | When the browser finishes the loading of the page |
| unload | onunload | When the visitor leaves the current webpage, the browser unloads it |
| resize | onresize | When the visitor resizes the window of the browser |
| reset | onreset | When the window size is resized |
| scroll | onscroll | When the visitor scrolls a scrollable area |
Let's discuss some examples over events and their handlers.
Click Event
Explanation:
In the above given example, we have created a function "clickevent" which is called by using the "onclick" event. When a user will click on this button then this function will be called, function will return a string "This is Tpoint Tech" and "document.write" function will help to write the returned string on the document.
MouseOver Event
Explanation:
In the above given example, we have created a function "mouseoverevent" which is called by using the "onmouseover" event. When a user will mouser over a <p> text then this function will be called and an alert box will be displayed. We can reuse the mouseoverevent function as many as need in our program, so it will save memory.
Focus Event
Explanation:
In the above given example, we have created a function "focusevent" which is called by using the "onfocus" event. When a user will focus on a text field then this function will be called and a text field background color will be changed.
Keydown Event
Explanation:
In the above given example, we have created a function "keydownevent" which is called by using the "onkeydown" event. When a user will focus on a text field then this function will be called and a alert box will be displayed.
Load event
Explanation:
In the above example, we created an "onload" event on the html's <body> tag. When a HTML body will be loaded then a function will return a string "The page is loaded successfully" and "document.write" function will help to write the returned string on the document.
Next TopicJavaScript addEventListener()