JavaScript Events – Swati Lathia

Table of Contents

onclick

When a user clicks on an element, this event does occur. This event allows the programmer to execute a JavaScript’s function when an element gets clicked. It is used to get warnings, messages, validating forms etc.

It is used in almost every HTML element.

Syntax

<element onclick="JavaScript function">

Example : An alert box pops up when user clicks a button

<head>
	<script language="javascript">
		function demo()
		{
			alert("Welcome to Jamnagar");		
		}
	</script>
</head>
<body>
	<form>
		Click a button:
		<input type="button" value="Click Here" onclick="demo()">
	</form>
</body>

ondblclick

When a user double clicks on an element, this event does occur. This event allows the programmer to execute a JavaScript’s function when an element gets clicked. It is used to get warnings, messages, validating forms etc.

It is used in almost every HTML element.

Syntax

<element ondblclick="JavaScript function">

Example : An alert box pops up when user double clicks this paragraph

<head>
	<script language="javascript">
		function demo()
		{
			alert("Welcome to Jamnagar");		
		}
	</script>
</head>
<body>
	<p style="background-color:cyan;"ondblclick="demo();">
              Double Click this paragraph
        </p>
</body>

onmouseover

When a mouse pointer is moved over any element, this event does occur.

Syntax

<element onmouseover="JavaScript Function">

Example: When you move your mouse on paragraph, it will show you an alert box

<head>
	<script language="javascript">
		function demo()
		{
			alert("You have moved a mouse over a paragraph");		
		}
	</script>
</head>
<body>
	<p style="background-color:cyan;padding:50px;" onmouseover="demo();">
               Move a mouse here..    
        </p>
</body>

onmouseout

When a mouse pointer moves out of an element, this event does occur.

Syntax

<element onmouseout="JavaScript Function">

Example: When you move out of paragraph, it will show an alert box.

<head>
	<script language="javascript">
		function demo()
		{
			alert("You have moved out of paragraph");		
		}
	</script>
</head>
<body>
	<p style="background-color:cyan;padding:50px;" onmouseout="demo();">
             Come here and leave the paragraph.    
        </p>
</body>

onkeypress

When a key from keyboard gets pressed, this event does occur.

Syntax

<input type="text" onkeypress="JavaScript Function">

Example: When you press any key in text box, it will show an alert box.

<head>
	<script language="javascript">
		function demo()
		{
			alert("You have pressed a key");		
		}
	</script>
</head>
<body>
	<form>
		Enter anything:
		<input type="text" onkeypress="demo();">
	</form>
</body>

onkeyup

When user releases a key from a keyboard, this event does occur.

Syntax

<input type="text" onkeyup="JavaScript Function">

Example: When you release a key from keyboard, it will show you an alert box

<head>
	<script language="javascript">
		function demo()
		{
			alert("You have released a key");		
		}
	</script>
</head>
<body>
	<form>
		Enter anything:
		<input type="text" onkeyup="demo();">
	</form>
</body>

onfocus

When an elements get focus, this event does execute. This event is most often used with <input>, <select>, and <a>.

Syntax

<element onfocus="JavaScript Function">

Example: After entering two values in text boxes, when you tab on third text box, the total will be displayed in it.

<head>
	<script language="javascript">
		function demo()
		{
			val1=parseInt(document.getElementById("t1").value);
			val2=parseInt(document.getElementById("t2").value);
			document.getElementById("t3").value=val1+val2;		
		}
	</script>
</head>
<body>
	<form>
		Enter Value 1:
		<input type="text" id="t1"><br>
		Enter Value 2:
		<input type="text" id="t2"><br>
		Total:
		<input type="text" id="t3" onfocus="demo();"><br>
	</form>
</body>

onblur

When an object loses focus, this event gets execute.

Syntax

Example: When second text box loses it focus, total will be set in third text box.

<head>
	<script language="javascript">
		function demo()
		{
			val1=parseInt(document.getElementById("t1").value);
			val2=parseInt(document.getElementById("t2").value);
			document.getElementById("t3").value=val1+val2;		
		}
	</script>
</head>
<body>
	<form>
		Enter Value 1:
		<input type="text" id="t1"><br>
		Enter Value 2:
		<input type="text" id="t2" onblur="demo();"><br>
		Total:
		<input type="text" id="t3"><br>
	</form>
</body>

onload

The onload event occurs when an object has been loaded.

onload is often used within the <body> element to execute a script once a web page has completely loaded all content including images, script files, CSS files, etc.

The onload event can be used to check the visitor’s browser type and browser version, and load the proper version of the web page based on the information.

Syntax

<element onload="JavaScript Function">

Example:

<html>
<head>
	<script>
	function demo() 
	{
	  alert("Image is loaded");
	}
	</script>
</head>
<body>
<img src="im1.jpg" onload="demo()" width="100" height="132">
</body>
</html>

onchange

When the value of an element has been changed, this event gets execute. For radio buttons and check boxes, the onchange event occurs when the checked state has been changed.

Syntax

<element onchange="JavaScript Function">

Example: When you change the value from select option, it will show an alert box

<html>
<head>
	<script>
	function demo() 
	{
	  alert("You have changed the value");
	}
	</script>
</head>
<body>
	<form>
		Select Subject:
		<select onchange="demo();">
			<option>HTML</option>
			<option>JavaScript</option>
			<option>CSS</option>
			<option>Networking</option>
		</select>
	</form>
</body>
</html>

onsubmit

When a form is submitted, this event gets occur

Syntax

<form onsubmit="JavaScript Function">

Example: When you submit a form, the alert box will be displayed

<html>
<head>
	<script>
	function demo() 
	{
	  alert("Your form has been submitted");
	}
	</script>
</head>
<body>
	<form method=get onsubmit="demo();">
		Enter your name:
		<input type="text" name="t1">
		<br>
		<input type="submit" value="Submit Form">
	</form>
</body>
</html>

onreset

When a form is reset, this event gets occur

Syntax

<form onreset="JavaScript Function">

Example: When you click a reset button, form will be reset and an alert box will display

<html>
<head>
	<script>
	function demo() 
	{
	  alert("Your form has been reset");
	}
	</script>
</head>
<body>
	<form method=get onreset="demo();">
		Enter your name:
		<input type="text" name="t1">
		<br>
		<input type="Reset" value="Reset Form">
	</form>
</body>
</html>