When we browse the web, the browser registers different types of events. HTML has a set of events. These HTML events are perform on HTML elements. HTML events are the tasks that are going to happen on HTML elements. When JavaScript interacts with HTML. Then the Script can respond to these events, which are known as JavaScript event.
JavaScript Event occur when the user clicks on the link or button, hover or swipe over an element, Type any think, resize the window or when the page is loads.
To trigger a particular function, an event can be used. When a user interacts with a different part of the page, need to use different code to trigger the function.
Types of JavaScript Events.
Mouse Events:
Event | description |
---|---|
click | When the user presses and releases a button on the element |
dbclick | When the user presses and releases a button twice on the element |
mousedown | When the user presses mouse button while over an element |
mouseup | When the user releases and releases a button on the element |
mousemove | When user move the mouse |
mouseover | When user move the mouse over an element |
mouseout | When user move the mouse off an element |
Let’s discuss mouse event with click Event examples over events.
<html>
<head> Javascript Events </head>
<body>
<script language="Javascript" type="text/Javascript">
<!--
function clickevent()
{
document.write("This is Click Event");
}
//-->
</script>
<form>
<input type="button" onclick="clickevent()" value="Which event this is?"/>
</form>
</body>
</html>
As A Result:

When user click on the Which event this is button. And the output is

Keyboard Events
Event | Description |
---|---|
keydown | When user press the key and repeat while the key is depressed |
keyup | When the user release the key |
keypress | When user insert character. |
Let’s discuss keyboard event with keydown Event examples over events.
<html>
<head> Javascript Events</head>
<body>
<h2> Enter something here</h2>
<input type="text" id="input1" onkeydown="keydownevent()"/>
<script>
<!--
function keydownevent()
{
document.getElementById("input1");
}
//-->
</script>
</body>
</html>
As a Result:

When user press the Keys. And the output is

UI events
Events | Description |
---|---|
load | When web page has finished loading. |
unload | When web page is unloading. Usually because a new page was requested or visitor leaves the current webpage. |
error | Browser encounters a JavaScript error or an asset doesn’t exist. |
resize | Browser window has been resized. |
scroll | When user has scrolled up or down the page. |
Let’s discuss UI event with load Event examples over events.
<html>
<head>Javascript Events</head>
</br>
<body onload="window.alert('Page successfully loaded');">
<script>
<!--
document.write("The page is loaded successfully");
//-->
</script>
</body>
</html>
As a Result:

How Event Trigger JavaScript Code
There are three steps to trigger some JavaScript code when a user interacts with an Html web page. These steps are also known as event handling.
- Select element: The first step is, selecting an element node where the user wants the script to respond.
For example.
If You want to trigger a function when the user clicks on the link or button. You need to get the DOM node for that link element.
- Specify Event: We select an element, Now it’s time to select which event will be performed on the selected node.
For example Mouse event, a keyboard event, etc.
- Call Code: State the code you want to run when the event occurs.
Terminology– JavaScript Event
Event fire or are raised:
When the event has occurred, it is called having fired or been raised. For example: if the user clicks or tap on the button or link, then the click event would be fired in the browser.
Events trigger scripts
When the click event fires on the element, it is known as Trigger a function script.
Focus event:
Event | Description |
---|---|
focus | When the element gain the focus |
blur | When the element lose the focus |
Form event
Event | Description |
---|---|
change | When the user modifies or changes the value of a form element |
submit | When user submits a form by using button or a key. |
reset | When user click on the form reset button to reset the value. |
cut | When user cuts content form the form field. |
copy | When user cuts content form the form field. |
paste | When user paste content form the form field. |
select | When user selects some text in the form field. |
Mutation Event
Events | Description |
---|---|
DOMSubtreeModified | Chang has been made to document |
DOMNodeInserted | Node is inserted as a direct child of another node |
DOMNodeRemoved | Node is removed from another node |
DOMNodeInsertedIntoDocument | Node is inserted as a descendant of another node. |
DOMNodePemovedIntoDocument | Node is removed as a descendant of another node. |
Recommended Posts:
Difference between constant and variable in java
Difference between let and var in JavaScript?
How to declare variable in JavaScript
Reference:
Book Name: JavaScript and jQuery by Jon Duckett
Loved the write up. Please make a guide on react.js
Thank you for this valuable information