What is an Event ?
JavaScript’s interaction with HTML is handled through events that occur when the user or the browser manipulates a page.
When the page loads, it is called an event. When the user clicks a button, that clicks to is an event. Other examples include events like pressing any key, closing a window, resizing a window, etc.
Developers can use these events to execute JavaScript-coded responses, which cause buttons to close windows, messages to be displayed to users, data to be validated, and virtually any other type of response imaginable.
Events are a part of the Document Object Model (DOM) Level 3 and every HTML element contains a set of events that can trigger JavaScript Code.
Please go through this small tutorial for a better understanding of HTML Event Reference. Here we will see a few examples to understand a relation between Event and JavaScript −
Event
Following table describes the Event Handlers used in the JavaScript :
S.No. | Event | When it occurs |
1. | onabort | It occurs when the user aborts the page or media file loading. |
2. | onblur | It occurs when the user leaves an HTML object. |
3. | onchange | It occurs when the user changes or updates the value of an object. |
4. | onclick | It occurs or triggers when any user clicks on an HTML element. |
5. | ondblclick | It occurs when the user clicks on an HTML element two times together. |
6. | onfocus | It occurs when the user focuses on an HTML element. This event handler works opposite to onblur. |
7. | onkeydown | It triggers when a user is pressing a key on a keyboard device. This event handler works for all the keys. |
8. | onkeypress | It triggers when the users press a key on a keyboard. This event handler is not triggered for all the keys. |
9. | onkeyup | It occurs when a user released a key from a keyboard after pressing on an object or element. |
10. | onload | It occurs when an object is completely loaded. |
11. | onmousedown | It occurs when a user presses the button of a mouse over an HTML element. |
12. | onmousemove | It occurs when a user moves the cursor on an HTML object. |
13. | onmouseover | It occurs when a user moves the cursor over an HTML object. |
14. | onmouseout | It occurs or triggers when the mouse pointer is moved out of an HTML element. |
15. | onmouseup | It occurs or triggers when the mouse button is released over an HTML element. |
16. | onreset | It is used by the user to reset the form. |
17. | onselect | It occurs after selecting the content or text on a web page. |
18. | onsubmit | It is triggered when the user clicks a button after the submission of a form. |
19. | onunload | It is triggered when the user closes a web page. |
Javascript has events to provide a dynamic interface to a webpage. These events are hooked to elements in the Document Object Model(DOM). These events by default use bubbling propagation i.e, upwards in the DOM from children to parent. We can bind events either as inline or in an external script.
There are some JavaScript events:
1) onclick events:
This is a mouse event and provokes any logic defined if the user clicks on the element it is bound to.
<!doctype html>
<html>
<head>
<script>
function hiThere() {
alert('Hi there!');
}
</script>
</head>
<body>
<button type="button" onclick="hiThere()">Click me event</button>
</body>
</html>
2) onkeyup event:
This event is a keyboard event and executes instructions whenever a key is released after pressing.
<!doctype html>
<html>
<head>
<script>
var a = 0;
var b = 0;
var c = 0;
function changeBackground() {
var x = document.getElementById('bg');
bg.style.backgroundColor = 'rgb('+a+', '+b+', '+c+')';
a += 1;
b += a + 1;
c += b + 1;
if (a > 255) a = a - b;
if (b > 255) b = a;
if (c > 255) c = b;
}
</script>
</head>
<body>
<input id="bg" onkeyup="changeBackground()"
placeholder="write something" style="color:#fff">
</body>
</html>
3) onmouseover event:
This event corresponds to hovering the mouse pointer over the element and its children, to which it is bound to.
<!doctype html>
<html>
<head>
<script>
function hov() {
var e = document.getElementById('hover');
e.style.display = 'none';
}
</script>
</head>
<body>
<div id="hover" onmouseover="hov()"
style="background-color:green;height:200px;width:200px;">
</div>
</body>
</html>
4) onmouseout event:
Whenever the mouse cursor leaves the element which handles a mouseout event, a function associated with it is executed.
<!doctype html>
<html>
<head>
<script>
function out() {
var e = document.getElementById('hover');
e.style.display = 'none';
}
</script>
</head>
<body>
<div id="hover" onmouseout="out()"
style="background-color:green;height:200px;width:200px;">
</div>
</body>
</html>
5) onchange event:
This event detects the change in value of any element listing to this event.
<!doctype html>
<html>
<head></head>
<body>
<input onchange="alert(this.value)" type="number">
</body>
</html>
6) onload event:
When an element is loaded completely, this event is evoked.
<!doctype html>
<html>
<head></head>
<body>
<img onload="alert('Image completely loaded')"
alt="GFG-Logo"
src="https://media.geeksforgeeks.org/wp-content/cdn-uploads/GeeksforGeeksLogoHeader.png">
</body>
</html>
7) onfocus event:
An element listing to this event executes instructions whenever it recieves focus.
<!doctype html>
<!doctype html>
<html>
<head>
<script>
function focused() {
var e = document.getElementById('inp');
if (confirm('Got it?')) {
e.blur();
}
}
</script>
</head>
<body>
<p >Take the focus into the input box below:</p>
<input id="inp" onfocus="focused()">
</body>
</html>
8) onblur event:
This event is evoked when an element loses focus.
<!doctype html>
<html>
<head></head>
<body>
<p>Write something in the input box and then click elsewhere
in the document body.</p>
<input onblur="alert(this.value)">
</body>
</html>