Signup/Sign In

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.

JavaScript event handling

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.

Event Description
onsubmit triggers on submission of a form
onselect triggers on selecting an element
oninvalid triggers, when an element is, is in invalid
oninput triggers when input is provided for an element
onforminput triggers when input is provided on a form
onformchange triggers when a form changes
onfocus triggers when a window get focus
oncontextmenu triggers when the context menu is used
onchange triggers when an element changes
onblur triggers when a window loses focus.

JavaScript Keyboard events

Following are events available for Keyboard key press.

Event Description
onkeydown triggers on pressing a key
on keypress triggers when the key is pressed
onkeyup triggers on releasing a key

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.

Event Description
onclick triggers on clicking the mouse button
ondblclick triggers on double-clicking the mouse button
ondrag triggers on dragging an element
ondrop triggers on dropping the dragged element
onscroll triggers on scrolling the scroll bar of an element
onmouseup triggers on releasing the mouse button
onmousewheel triggers on rotating the mouse wheel
ondragleave triggers on leaving the valid target while dragging an element
onmousedown triggers on pressing the mouse button
onmousemove triggers on moving the mouse pointer

JavaScript Events of Browser

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

Events Description
onblur triggers when a window loses focus
onerror triggers when an error occurs
onfocus triggers when a window get focus
onload triggers at the time of loading a document
onmessage triggers when the postMessage() method sends a message to the current document
onafterpoint triggers after printing a document
onbeforepoint triggers before printing a document
onhaschange triggers at the time of changing a document
onredo triggers at the time of performing redo action in a document
ononline triggers when a document gets online

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.

Events

Description
onwaiting triggers when the media file has stopped but is expected to resume later
onpause triggers on pausing the media file
onplay triggers when a media file is going to play
onseeking triggers when the seeking process begins
onabort triggers on aborting a process
onemptied triggers when a media element becomes empty due to some errors
onended triggers when the media file ends
onloadeddata triggers on loading the media file
ontimeupdate triggers on changing the playing position of the media file
onvolumechange triggers on changing the volume

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.



About the author:
I like writing content about C/C++, DBMS, Java, Docker, general How-tos, Linux, PHP, Java, Go lang, Cloud, and Web development. I have 10 years of diverse experience in software development. Founder @ Studytonight