JavaScript Events

JavaScript Events are actions or occurrences that happen in the browser and can be detected and handled by JavaScript. Events can be user interactions like clicks, keyboard inputs, or system-generated events like page loading.

Event Handler Uses:

It can be used directly within HTML elements by adding special attributes to those elements. They can also be used within the <script> tags or in external JavaScript files.

Some of the HTML events and their event handlers are:

Mouse events:

Event Performed	Event Handler	Description
click	onclick	When mouse click on an element
mouseover	onmouseover	When the cursor of the mouse comes over the element
mouseout	onmouseout	When the cursor of the mouse leaves an element
mousedown	onmousedown	When the mouse button is pressed over the element
mouseup	onmouseup	When the mouse button is released over the element
mousemove	onmousemove	When the mouse moves over the element

Keyboard events:

Event Performed	Event Handler	Description
Keydown	onkeydown	Triggered when the user presses a key down.
Keyup	onkeyup	Triggered when the user releases a key.

Form events:

Event Performed	Event Handler	Description
Focus	onfocus	Triggered when the user focuses on an element.
Submit	onsubmit	Triggered when the user submits the form.
Blur	onblur	Triggered when the focus is moved away from a form element.
Change	onchange	Triggered when the user modifies or changes the value of a form element.

Window/Document events

Event Performed	Event Handler	Description
Load	onload	Triggered when the browser finishes the loading of the page.
Unload	onunload	Triggered when the visitor leaves the current webpage, and the browser unloads it.
Resize	onresize	Triggered when the visitor resizes the window of the browser.
Reset	onreset	Triggered when a form is reset.
Scroll	onscroll	Triggered when the visitor scrolls a scrollable element.

Let's discuss some examples over events and their handlers.

Click Event

Example


<html>  
<head> Javascript Events </head>  
<body>  
<script language="Javascript" type="text/Javascript">  
    <!--  
    function clickevent()  
    {  
        document.write("This is JavaTpoint");  
    }  
    //-->  
</script>  
<form>  
<input type="button" onclick="clickevent()" value="Who's this?"/>  
</form>  
</body>  
</html>

Output

Javascript Events

Explanation:

In the above given example, we have created a function "clickevent" which is called by using the "onclick" event. When a user will click on this button then this function will be called, function will return a string "This is JavaTpoint" and "document.write" function will help to write the returned string on the document.

MouseOver Event

Example


<html>  
<head>   
    <h1> Javascript Events </h1>  
</head>  
<body>  
<script language="Javascript" type="text/Javascript">  
    <!--  
    function mouseoverevent()  
    {  
        alert("This is JavaTpoint");  
    }  
    //-->  
</script>  
<p onmouseover="mouseoverevent()"> Keep cursor over me</p>  
</body>  
</html>

Output

Javascript Events

Keep cursor over me

Explanation:

In the above given example, we have created a function "mouseoverevent" which is called by using the "onmouseover" event. When a user will mouser over a

text then this function will be called and an alert box will be displayed. We can reuse the mouseoverevent function as many as need in our program, so it will save memory.

Focus Event

Example


<html>  
<head> Javascript Events </head>  
<body>  
<h2> Enter something here </h2>  
<input type="text" id="input1" onfocus="focusevent()" />  
<script>  
<!--  
    function focusevent()  
    {  
        document.getElementById("input1").style.background=" aqua";  
    }  
//-->  
</script>  
</body>  
</html>

Output

Enter something here

Explanation:

In the above given example, we have created a function "focusevent" which is called by using the "onfocus" event. When a user will focus on a text field then this function will be called and a text field background color will be changed.

Keydown Event

Example


<html>  
<head> Javascript Events </head>  
<body>  
<h2> Enter something here </h2>  
<input type="text" id="input1" onkeydown="keydownevent()" />  
<script>  
<!--  
    function keydownevent()  
    {  
        document.getElementById("input1");  
        alert("Pressed a key");  
    }  
//-->  
</script>  
</body>  
</html>

Output

Enter something here

Explanation:

In the above given example, we have created a function "keydownevent" which is called by using the "onkeydown" event. When a user will focus on a text field then this function will be called and a alert box will be displayed.

Load event

Example


<html>  
<head>Javascript Events</head>  
</br>  
<body onload="window.alert('Page successfully loaded');">  
<script>  
<!--  
document.write("The page is loaded successfully");  
//-->  
</script>  
</body>  
</html>

Output

Explanation:

In the above example, we created an "onload" event on the html's <body> tag. When a HTML body will be loaded then a function will return a string "The page is loaded successfully" and "document.write" function will help to write the returned string on the document.