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.
Contents
hide
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 |
Let’s discuss some examples over events and their handlers.
The Click Event (onclick)
|
1 2 3 4 5 6 7 8 9 10 11 12 13 |
<!doctype html> <html> <head> <script> function hiThere() { alert('Hi there!'); } </script> </head> <body> <button type="button" onclick="hiThere()">Click me event</button> </body> </html> |
The Mouseover Event (onmouseover)
|
1 2 3 4 5 6 7 8 9 10 |
<!DOCTYPE html> <html> <head> <title>JavaScript Handling the Mouseover Event</title> </head> <body> <button type="button" onmouseover="alert('You have placed mouse pointer over a button!');">Place Mouse Over Me</button> <a href="#" onmouseover="alert('You have placed mouse pointer over a link!');">Place Mouse Over Me</a> </body> </html> |
The Mouseout Event (onmouseout)
|
1 2 3 4 5 6 7 8 9 10 |
<!DOCTYPE html> <html> <head> <title>JavaScript Handling the Mouseout Event</title> </head> <body> <button type="button" onmouseout="alert('You have moved out of the button!');">Place Mouse Inside Me and Move Out</button> <a href="#" onmouseout="alert('You have moved out of the link!');">Place Mouse Inside Me and Move Out</a> </body> </html> |
The Keydown Event (onkeydown)
|
1 2 3 4 5 6 7 8 9 10 11 12 |
<!DOCTYPE html> <html> <head> <title>JavaScript Handling the Keydown Event</title> </head> <body> <input type="text" onkeydown="alert('You have pressed a key inside text input!')"> <hr> <textarea cols="30" onkeydown="alert('You have pressed a key inside textarea!')"></textarea> <p><strong>Note:</strong> Try to enter some text inside input box and textarea.</p> </body> </html> |
The Keyup Event (onkeyup)
|
1 2 3 4 5 6 7 8 9 10 11 12 |
<!DOCTYPE html> <html> <head> <title>JavaScript Handling the Keyup Event</title> </head> <body> <input type="text" onkeyup="alert('You have released a key inside text input!')"> <hr> <textarea cols="30" onkeyup="alert('You have released a key inside textarea!')"></textarea> <p><strong>Note:</strong> Try to enter some text inside input box and textarea.</p> </body> </html> |
The Focus Event (onfocus)
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 |
<!DOCTYPE html> <html> <head> <title>JavaScript Handling the Focus Event</title> </head> <body> <script> function highlightInput(elm){ elm.style.background = "yellow"; } </script> <input type="text" onfocus="highlightInput(this)"> <button type="button">Button</button> </body> </html> |
The Submit Event (onsubmit)
|
1 2 3 4 5 6 7 8 9 10 11 12 13 |
<!DOCTYPE html> <html> <head> <title>JavaScript Handling the Submit Event</title> </head> <body> <form action="action.php" method="post" onsubmit="alert('Form data will be submitted to the server!');"> <label>First Name:</label> <input type="text" name="first-name" required> <input type="submit" value="Submit"> </form> </body> </html> |
The Blur Event (onblur)
|
1 2 3 4 5 6 7 8 9 10 11 |
<!DOCTYPE html> <html> <head> <title>JavaScript Handling the Blur Event</title> </head> <body> <input type="text" onblur="alert('Text input loses focus!')"> <button type="button">Submit</button> <p><strong>Note:</strong> First click inside the text input box then click outside to see how it works.</p> </body> </html> |
The Change Event (onchange)
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 |
<!DOCTYPE html> <html> <head> <title>JavaScript Handling the Change Event</title> </head> <body> <select onchange="alert('You have changed the selection!');"> <option>Select</option> <option>Male</option> <option>Female</option> </select> <p><strong>Note:</strong> Select any option in select box to see how it works.</p> </body> </html> |
The Load Event (onload)
|
1 2 3 4 5 6 7 8 9 |
<!DOCTYPE html> <html> <head></head> <body> <img onload="alert('Image completely loaded')" alt="MYEBCODE Logo" src="https://www.mywebcode.com/wp-content/uploads/2020/06/mywebcode.png"> </body> </html> |
The Unload Event (onunload)
|
1 2 3 4 5 6 7 8 9 10 11 |
<!DOCTYPE html> <html> <head> <title>JavaScript Handling the Unload Event</title> </head> <body onunload="alert('Are you sure you want to leave this page?');"> <h1>This is a heading</h1> <p>This is paragraph of text.</p> <p><strong>Note:</strong> This example may not work. The unload event is not supported properly in most of the browsers.</p> </body> </html> |
The Resize Event (onresize)
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 |
<!DOCTYPE html> <html> <head> <title>JavaScript Handling the Resize Event</title> </head> <body> <p id="result"></p> <script> function displayWindowSize(){ var w = window.outerWidth; var h = window.outerHeight; var txt = "Window size: width=" + w + ", height=" + h; document.getElementById("result").innerHTML = txt; } window.onresize = displayWindowSize; </script> <p><strong>Note:</strong> Resize the browser window to see how the resize event works.</p> </body> </html> |
