JavaScript Events


JavaScript's interaction with HTML is handled through events that occur when the user or browser manipulates a page.

When the page loads, that is an event. When the user clicks a button, that click, too, is an event. Another example of events are like pressing any key, closing window, resizing window etc.

Developers can use these events to execute JavaScript coded responses, which cause buttons to close windows, messages to be displayed to users, data to be validated, and virtually any other type of response imaginable to occur.

Events are a part of the Document Object Model (DOM) Level 3 and every HTML element have a certain set of events which can trigger JavaScript Code.

Syntax

With single quotes:

<HTML Element event='some JavaScript'>

With double quotes:

<HTML Element event="some JavaScript">

onclick Event

This is the most frequently used event type which occurs when a user clicks mouse button.

Example

<script type="text/javascript">  
function mssg(){  
alert("Hello World! this is onclick Event");  
}  
</script>
<input type="button" onclick="mssg()" value="Say Hello"/>
Output

onsubmit Event

Another most important event type is onsubmit. This event occurs when you try to submit a form. So you can put your form validation against this event type.

Example

<script type="text/javascript">  
function validateForm()
 {
  var user=login.username.value;
  var pass=login.password.value;
  if(user == '')
   {
    document.getElementById('error').innerHTML=" Enter Username";
    document.getElementById('error').style.color="red";
   }
  else if(pass == '')
   {
    document.getElementById('error').innerHTML=" Enter Password";
	document.getElementById('error').style.color="red"; 
   }
  else  if((user != '')&& (pass != ''))
   {
	document.getElementById('error').innerHTML=" Successfully !";
	document.getElementById('error').style.color="green";
   }
  }
</script>
<form name="login">
<h1 id="error"></h1>
<label>Username:</label>
<input type="text" name="username" id="username" />
<label>Password</label>
<input type="password" name="password" id="password" />
<input type="button" name="button"  value="Submit" onclick="validateForm()" />
</form>
Output


onmouseover and onmouseout Event

The onmouseover event occurs when you bring your mouse over any element.

The onmouseout occurs when you take your mouse out from that element.

<script type="text/javascript">
function over() {
   alert("Mouse Over");
}
function out() {
   alert("Mouse Out");
}
</script>
<div onmouseover="over()" onmouseout="out()">
<h2> This is inside the division </h2>
</div>
Output

This is inside the division


HTML Standard Events

EventValueDescription
onchangescriptScript runs when the element changes
onsubmitscriptScript runs when the form is submitted
onresetscriptScript runs when the form is reset
onselectscriptScript runs when the element is selected
onblurscriptScript runs when the element loses focus
onfocusscriptScript runs when the element gets focus
onkeydownscriptScript runs when key is pressed
onkeypressscriptScript runs when key is pressed and released
onkeyupscriptScript runs when key is released
onclickscriptScript runs when a mouse click
ondblclickscriptScript runs when a mouse double-click
onmousedownscriptScript runs when mouse button is pressed
onmousemovescriptScript runs when mouse pointer moves
onmouseoutscriptScript runs when mouse pointer moves out of an element
onmouseoverscriptScript runs when mouse pointer moves over an element
onmouseupscriptScript runs when mouse button is released

Share this article on