Events in JavaScript

What is event in JavaScript?

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.
Events 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 Event In JavaScript.

Mouse Events:

Eventdescription
clickWhen the user presses and releases a button on the element
dbclickWhen the user presses and releases a button twice on the element
mousedownWhen the user presses mouse button while over an element
mouseupWhen the user releases and releases a button on the element
mousemoveWhen user move the mouse
mouseoverWhen user move the mouse over an element
mouseoutWhen 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

EventDescription
keydownWhen user press the key and repeat while the key is depressed
keyupWhen the user release the key
keypressWhen 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

EventsDescription
loadWhen web page has finished loading.
unloadWhen web page is unloading. Usually because a new page was requested or visitor leaves the  current webpage.
errorBrowser encounters a JavaScript error or an asset doesn’t exist.
resizeBrowser window has been resized.
scrollWhen 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–Event In JavaScript

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:

EventDescription
focusWhen the element gain the focus
blurWhen the element lose the focus
It occur when an element gain or lose the focus

Form event

EventDescription
changeWhen the user modifies or changes the value of a form element
submitWhen user submits a form by using button or a key.
resetWhen user click on the form reset button to reset the value.
cutWhen user cuts content form the form field.
copyWhen user cuts content form the form field.
pasteWhen user paste content form the form field.
selectWhen user selects some text in the form field.
It occur when user interact with a form elemtent

Mutation Event

EventsDescription
DOMSubtreeModifiedChang has been made to document
DOMNodeInsertedNode is inserted as a direct child of another node
DOMNodeRemovedNode is removed from another node
DOMNodeInsertedIntoDocumentNode is inserted as a descendant of another node.
DOMNodePemovedIntoDocumentNode is removed as a descendant of another node.

Recommended Posts:

What is JSON ?

Difference between constant and variable in java

Difference between let and var in JavaScript?

How to declare variable in JavaScript

Reference:

javapoint.com

Book Name: JavaScript and jQuery by Jon Duckett

2 thoughts on “What is event in JavaScript?

Leave a Reply

Your email address will not be published. Required fields are marked *