What is event in JavaScript?

3 min readMay 19, 2021

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:

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 mousemouseoverWhen 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

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

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>