You Are Here

JavaScript Events

What is an Event?

A JavaScript event is something that triggers a specific action in the browser. Normally an event occurs when a user loads a page.
Following are some examples when an JavaScript event occurs:
  • When the page loads
  • When a user moves her mouse
  • When the user clicks a button
  • When the user scrolls the page
  • When the user clicks a form field

How events work?

When a JavaScript event occurs to an HTML element in a web page, it checks to see if any event handlers are attached to it. If the answer is yes then it calls them in respective order, while sending along with references and further information for each event that occurred. The event handlers then act on the event.
The JavaScript event is categorized into four main groups:
  • Mouse events
  • Keyboard events
  • Form events
  • Document/Windows events

Mouse Events:

A mouse event occurs when the user clicks some element, moves the mouse pointer over an element, etc.
Following are some important mouse events:

The onclick Event:

When a user clicks on an element on a webpage the click event occurs and you can handle a click event with an onclick event handler.
The following example shows an alert message when you click on the elements.

Example:

<button type="button" onclick="alert('Welcome! Learn JavaScript events');"> Click Me </button>
Try it

The oncontextmenu Event:

The contextmenu event triggers when a user clicks the right button of the mouse on an element to open the context menu and you can handle a contextmenu event with an oncontextmenu event handler.
The following example shows an alert message when you right-click on the event.

Example:

<button type="button" oncontextmenu="alert('You have clicked right button of mouse');"> Right Click on Me </button>
Try it

The onmouseover Event:

The mouseover event triggers when a user moves the mouse pointer over an element and you can handle the mouseover event with the onmouseover event handler.
The following example shows an alert message when you mouse over the elements.

Example:

<button type="button" onmouseover="alert('You have placed mouse pointer over a button!');"> Mouse Over Me </button>
Try it

The onmouseout Event:

The mouseout event occurs when a user moves the mouse pointer outside of an element. The mouseout event can be handled with the onmouseout event handler.
The following example shows an alert message when the mouseout event occurs.

Example:

<button type="button" onmouseout="alert('You have moved out of the button!');"> Put Mouse Over Me and Move Out </button>
Try it

Keyboard Events:

A keyboard event occurs when the user presses or release a key on the keyboard.
Following are some important keyboard events and their event handler.

The onkeydown Event:

The keydown event occurs when the user presses down a key on the keyboard. The keydown event can be handled with the onkeydown event handler.
The following example shows an alert message when the keydown event occurs.

Example:

<input type="text" onkeydown="alert('You have pressed a key inside text input!')">
Try it

The onkeyup Event:

The keyup event occurs when the user releases a key on the keyboard. The keyup event can be handled with the onkeyup event handler.
The following example shows an alert message when the keyup event occurs.

Example:

<input type="text" onkeyup="alert('You have released a key inside text input!')">
Try it

The onkeypress Event:

The keypress event occurs when a user presses down a key on the keyboard that has a character value associated with it. For example, keys like ctrl, shift, alt, esc, and arrow keys, etc. will not generate a keypress event, but generate a keydown and keyup event. The keypress event can be handled with the onkeypress event handler.
The following example shows an alert message when the keypress event occurs.

Example:

<input type="text" onkeypress="alert('You have pressed a key inside text input!')">
Try it

Form Events:

A form event occurs when a form control receives or loses focus or when the user modifies a form control value such as by typing text in a text input, select an option in a select box, etc.
The following are some important form events and their event handlers.

The onfocus Event:

The focus event triggers when the user gives focus to an element on a web page. The focus event can be handled with the onfocus event handler.
The following example highlights the background of text input in yellow color when it receives the focus.

Example:

<script>
function highlightInput(element){
element.style.background = "#ff5722";
}
</script>
<input type="text" onfocus="highlightInput(this)">
<button type="button">Button</button>
Try it

The onblur Event:

The blur event triggers when the user takes the focus away from a form element or a window. The blur event can be handled with the onblur event handler.
The following example shows an alert message when the text input element loses focus.

Example:

<input type="text" onblur="alert('Text input loses focus!')">
<button type="button">Submit</button>
Try it

The onchangeEvent:

The change event triggers when a user changes the value of a form element. The change event can be handled with the onchange event handler.
The following example shows an alert message when you change the option in the select box.

Example:

<select onchange="alert('You have changed the selection!');">
<option>Select Technology</option>
<option>HTML</option>
<option>CSS</option>
<option>JavaScript</option>
<option>jQuery</option>
</select>
Try it

The onsubmit Event:

The submit event only occurs when the user submits a form on a web page. The submit event can be handled with the onsubmit event handler.
The following example shows you an alert message while submitting the form to the server.

Example:

<form action="/action.php" method="post" onsubmit="alert('Form data will be submitted to the server!');">
<label>First Name:</label>
<input type="text" name="first-name" required>
<input type="submit" value="Submit">
</form>
Try it

Document/Window Events:

Events also occur in situations when the page has loaded or when the user resizes the browser window, etc.
The following are some important document/window events and their event handlers.

The onload Event:

The load event triggers when a web page has finished loading in the web browser. The load event can be handled with the onload event handler.
The following example shows an alert message when the page finishes loading.

Example:

<body onload="window.alert('Page is loaded successfully!');">
<h2>This is a heading</h2>
<p>This is paragraph.</p>
</body>
Try it

The onunload Event:

The unload event triggers when a user leaves the current web page. The unload event can be handled with the onunload event handler.
The following example shows an alert message when you try to leave the page.

Example:

<body onunload="alert(' Are you want to leave this page?');">
<h2>This is a heading</h2>
<p>This is paragraph of text.</p>
</body>
Try it

The onresize Event:

The resize event triggers when a user resizes the browser window and it also occurs in situations when the browser window is minimized or maximized. The resize event can be handled with the onresize event handler.
The following example shows an alert message when you resize the browser window to a new width and height.

Example:

<script>
function displayWindowSize(){
var w = window.outerWidth;
var h = window.outerHeight;
var txt = "Window size: width=" + w + ", height=" + h;
document.getElementById("result").innerHTML = txt;
}
window.onresize = displayWindowSize;
</script>
Try it

Ask a Question

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