Description

An event is something that happens when the user interacts with a web page using a keyboard and mouse.

In some cases, the browser itself can trigger the events, based on page load and unload.

When an event occurs, we need to handle the event using an event handler (also known as an event listener) to perform some tasks.

  • Generally, all event handlers start with the word "on", like onclick, onload, onblur, etc.,
  • Event handlers can be used on HTML elements directly in the form of attributes.
  • HTML attributes are case-insensitive, so the event handlers are also case-insensitive.
    • So, the events onclick, OnClick, onClick, and ONCLICK are valid and do the same thing.

Categories of Events

The JavaScript event handlers can be categorized into four main categories.

Category Description Events
Mouse Events Mouse events are fired for mouse actions. onclick, onmouseover, onmouseout, oncontextmenu
Keyboard Events Keyboard events are fired for keyboard actions. onkeydown, onkeyup, onkeypress
Form Events Form events are fired when a form control receives or loses focus, and changes a form control value. onfocus, onblur, onchange, onsubmit
Document/Window Events Document/Window events are fired for page load and browser window resize. onload, onunload, onresize

How to Assign an Event Handler

We can assign an event handler in many ways.

  • Assign an event handler directly to an HTML element using its special event-handler attributes.
  • Assign an event handler within the JavaScript code by selecting the element. This is the recommended approach as it keeps the JavaScript code separate from HTML.

The below example assigns the event onclick on the HTML element, directly using its attributes.

<button type="button" onclick="alert('Hello World!')">Click Me</button>

The below example assigns the event onclick on the HTML element, within the JavaScript code by selecting the element.

<button type="button" id="myBtn">Click Me</button>
<script>
    function sayHello() {
        alert('Hello World!');
    }
    document.getElementById("myBtn").onclick = sayHello;
</script>

Mouse Events

The keyboard events are triggered for actions related to mouse clicks.

Event Description
onclick Occurs when a user clicks on an element on a web page.
oncontextmenu Occurs when a user clicks the right mouse button to open the element's context menu.
onmouseover Occurs when a user moves the mouse pointer over an element.
onmouseout Occurs when a user moves the mouse pointer out of an element.

The below example shows alert messages for mouse events as defined on the buttons.

On Click Event

<button type="button" onclick="alert('You have clicked a button!');">Click Me</button>

On Context Menu Event

<button type="button" oncontextmenu="alert('You have right-clicked a button!');">Right Click on Me</button>

On Mouse Over Event

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

On Mouse Out Event

<button type="button" onmouseout="alert('You have moved out of the button!');">Place Mouse Pointer Inside Me and Move Out</button>

Keyboard Events

The keyboard events are triggered for actions related to a keyboard, like a key press, key down, etc.,

Event Description
onkeydown Occurs when the user presses down a key on the keyboard.
This event occurs for all the keys on a keyboard.
onkeyup Occurs when the user releases a key on the keyboard.
This event occurs for all the keys on a keyboard.
onkeypress Occurs when the user presses down a key that has a character value on the keyboard.
This event doesn't occur for non-character keys, like Ctrl, Alt, Shift, Esc, Arrow keys, etc.,

The below example shows alert messages for keyboard events as defined on the input elements.

On Key Down Event

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

On Key Up Event

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

On Key Change Event

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

Form Events

The form events are triggered for actions related to form controls, like receiving focus, losing focus, modifying its value, etc.,

Event Description
onfocus Occurs when the user gives the focus to a form element on a web page.
onblur Occurs when the user takes the focus away from a form element or a window.
onchange Occurs when the user changes the value of a form element.
onsubmit Occurs when the user submits a form on a web page.

The below example shows alert messages for form events as defined on the form elements.

On Focus Event

<script>
    function highlightInput(elm){
        elm.style.background = "yellow";
    }    
</script>
<input type="text" onfocus="highlightInput(this)">
<button type="button">Button</button>

On Blur Event

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

On Change Event

<select onchange="alert('You have changed the selection!');">
    <option>Select</option>
    <option>Male</option>
    <option>Female</option>
</select>

On Submit Event

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

Document/Window Events

The document/window events are triggered for actions related to a web page or browser window.

Event Description
onload Occurs when a web page has finished loading in the web browser.
onunload Occurs when a user leaves the current web page.
onresize Occurs when a user resizes the browser window.
This event is also triggered when the browser window is minimized and maximized.

The below example shows an alert message when a web page finishes loaded.

<body onload="window.alert('The page is loaded successfully!');">
    <h1>Heading</h1>
    <p>This is paragraph of text.</p>
</body>

The below example shows an alert message when the user tries to leave the web page.

<body onunload="alert('Are you sure you want to leave this page?');">
    <h1>Heading</h1>
    <p>This is paragraph of text.</p>
</body>

The below example prints the window size to the document when the user tries to change the browser window size.

<p id="result"></p>    // Element to display the window size.

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

Overall

JavaScript Events are useful in performing some tasks when an event occurs.

Related Links