JavaScript Events

JavaScript Events are the building blocks of an interactive webpage. In JavaScript, events refer to the actions that are detected by a web browser whenever it detects any user movement on the browser screen. So everything starting from the movement of the mouse, keyboard click, hover over any particular HTML element, form submission, click on any input field, selection of a value from a dropdown, and everything else you do on a webpage, the browser generates an event for it which can be handled using JavaScript.

JavaScript enables us to write scripts to be executed when any of these events occur. For example, the onclick event is detected by the browser whenever you click the mouse button and using JavaScript we can perform any action on mouse click like we can set a counter and keep a track of mouse clicks to see how many times the user used the mouse click.

In the live example below, we have implemented a simple mouse click counter, click on the Output area to see the number of clicks getting updated as we have captured the mouse click event on the complete body of the HTML page.

In the code above the function that is used to perform an action upon capturing the mouse click event is known as an Event handler, which handles a particular event when the event is triggered.

JavaScript Event Handling Syntax

Following is the syntax to add a handler for any particular event in any HTML element.

<ABC_ELEMENT onXYZ="EVENT_HANDLER_CODE"></ABC_ELEMENT>

In the above code, we have added an event handler to capture the XYZ event on ABC_ELEMENT of the webpage. So whenever the XYZ event will occur with respect to the ABC_ELEMENT our event handler code will be executed.

For event handling, we can either provide a JavaScript function name, and define the function separately, or we can directly provide our JavaScript code in the HTML tag itself.

We can also do this by specifying the event handling part in JavaScript.

<ABC_ELEMENT is="myTag"></ABC_ELEMENT>

<script>
    function eventHandler() {
        // do something
    } 
    // setup event handler on HTML element
    document.getElementById("myTag").onXYZ = eventHandler;
</script>

In the above syntax, we have separated the HTML and JavaScript code completely. This is a better way of implementing event handling in JavaScript. This will also call the eventHandler function when the event XYZ is encountered in the HTML element ABC_ELEMENT.

Let's take a few examples covering a few different events so that you can understand how this works.

JavaScript onchange Event Example

This event is created when an HTML element like a select, or a radio button, or a checkbox, etc. changes. You can define an event handler to perform some action when this event occurs. In the code example below, we have created a dropdown using the <select> tag with <option> tags used inside it to add options to the dropdown.

Now once we add the onchange event handling on this element, whenever use selects any value, our event handler function will be executed.

JavaScript onClick Event Example

This event occurs when a user clicks on a button or clicks any HTML element on which we have set the event handler. In the example below, we have set a simple onClick handler in the <button> HTML tag.

JavaScript onmouseover Event Example

You can make your webpage more interactive by using the onmouseover event. When we set this event handling on any HTML element, whenever the user takes the mouse cursor over that HTML element, then the event handler is triggered.

We can use this event to change color, size of text, or in general create an interesting user interface which changes on mouser hover.

JavaScript onblur Event Example

JavaScript onblur event is triggered when focus goes out from any input field. In the example below, we have an input field on which we have set the onblur event handler. You can run the code example below to see the onblur event in action.

JavaScript events used with HTML forms

Below we have listed down all the events which can be used with HTML forms.

JavaScript Keyboard events

Following are events available for Keyboard key press.

JavaScript Mouse events used in HTML

We have already covered an example for onmouseover event above, these are other mouse events available. Try using these too and see what they can do.

JavaScript Events of Browser

Following are the browser events which you can use in your JavaScript code.

JavaScript Events for HTML Media Elements

Below are the events which can be used to manage various media types in an HTML webpage like video pause, video play etc.

Using JavaScript Events in Web Development

Events are useful in creating a dynamic and interective web applications. The application development process is full of events including:

• Event for loading the application

• Event for clicking a button

• Event for Submitting a user form

• Event to set focus at textbox

• Event for selecting an element, etc.

If you are developing a website, you should try using the JavaScript events to make your webpage more responsive, setup client side validations, handling user actions etc.

We have also listed down all the events above so you can use them and see how they work. In the live examples above you can try almost all of these events.