What is JavaScript event ?

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.

Table of Contents

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

Mouse event occur when the user interact with mouse

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.

Mouse event occur when the user interact with Keyboard

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

It occur when an element gain or 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.

It occur when user interact with a form elemtent

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.

Reference:

javapoint.com

Book Name: JavaScript and jQuery by Jon Duckett