JavaScript Events

JAVASCRIPT BASICS

• Introduction to JavaScript
• Javascript Features
• JavaScript in HTML
• JavaScript Syntax
• Output in JavaScript
• JavaScript Variables
• Javascript let Keyword
• JS Literals and Keywords
• JavaScript Data Types
• JavaScript Operators
• JavaScript Events
• Javascript const Keyword

JAVASCRIPT FLOW CONTROL AND LOOPS

• JS if, else and else if
• JavaScript for Loop
• JS while and do-while loop
• JS Switch case
• JS break and continue

JAVASCRIPT ADVANCED

• JavaScript Strings
• JavaScript String Methods
• JavaScript Array
• JavaScript Regular Expression
• JavaScript Popup Boxes
• JavaScript Functions
• JavaScript Default Parameters
• JavaScript Rest Parameters
• JavaScript Arrow Function
• JavaScript Errors
• JavaScript Error Handling
• JavaScript Cookies

JAVASCRIPT OBJECT

• JavaScript Objects
• JavaScript User-defined Object
• JavaScript Boolean Object
• JavaScript Number Object
• JavaScript Math Object
• JavaScript Date Object
• JavaScript RegExp Object

JAVASCRIPT WEB API AND INTERFACES

• JavaScript Browser Object
• JavaScript Window Object
• JavaScript History Object
• JavaScript Navigator Object
• JavaScript Location Object
• JavaScript Screen Object
• JavaScript Document Object

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.

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.

< prev

next >