Window Events
These are the events that occurs globally means it associates with web page and windows.
This event is used when we want to load other resources on our web page. mostly it is used to load the script file on the web page.
Example: This example shows the loading of image on the HTML web page.
HTML
<!DOCTYPE html><html><head> <title> onload Event </title></head><body> <img src="https://media.w3wiki.org/wp-content/uploads/20211113003851/geeks-300x83.png" id="imgid" alt="GFG_logo"> <p id="pid"></p> <script> document.getElementById("imgid") .addEventListener("load", GFGFun); function GFGFun() { document.getElementById("pid") .innerHTML = "Image loaded"; } </script></body></html> |
Output:
onload event
This event occurs when user resizs the browser window.
Example: This example shows the use of the onresize event. whenever there is resize occuring in web page then there is increment of a variable and we are present that on the screen.
HTML
<!DOCTYPE html><html><head> <title>onresize event</title></head><body> <h1 style="color:green">w3wiki</h1> <h2>onresize event</h2> <p>Resize the window</p> <p>Resized count: <span id="try">0</span></p> <script> window.addEventListener("resize", GFGfun); let c = 0; function GFGfun() { let res = c += 1; document.getElementById("try").innerHTML = res; } </script></body></html> |
Output:
onresize event
This event occurs once at a time. when a page is unable to load it triggres the unload event.
Example: This example shows the use of the unload event.
HTML
<!DOCTYPE html><html><head> <title> Onunload Event example </title></head><body onload="myEvent()"> <h2> Onunload Event</h2> <script> function myEvent() { alert("It is onunload event!!"); } </script></body></html> |
Output:
onunload event
This event triggers when a user focuses on an element. we can make any changes after focusing on that element.
Example: This example shows that on focusing on the input field it gets green background color.
HTML
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title> onfocus Event Example</title></head><body> <h1 style="color:green"> w3wiki </h1> <h2> onfocus Event </h2> <br> Name: <input type="text" onfocus="geekfun(this)"> <script> function geekfun(gfg) { gfg.style.background = "green"; } </script></body></html> |
Output:
onfocus event
This event is used when we are not focusing on the element.
Example: This example shows that if we loses the focus from the input field then it shows the alert.
HTML
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>onblur event</title></head><body> <h1 style="color:green"> w3wiki </h1> <h2>onblur event</h2> Email: <input type="email" id="email" onblur="myFunction()"> <script> function myFunction() { alert("Focus lost"); } </script></body></html> |
Output:
onblur event
What are JavaScript Events ?
JavaScript Events are the action that happens due to the interaction of the user through the browser with the help of any input field, button, or any other interactive element present in the browser.
Events help us to create more dynamic and interactive web pages. Also, these events can be used by the eventListeners provided by the JavaScript.
These are the events that can be used directly on the HTML page for dynamic interactivity:
Table of Content
- Mouse Events
- Keyboard Events
- Form Events
- Window Events