A JavaScript events is something that happens when a user interacts with the web page, such as when he clicked a link or button, entered text into an input box or text area, made a selection in a select box, pressed a key on the keyboard, moved the mouse pointer, submits a form, etc. In some cases, the Browser itself can trigger the events, such as the page load and unload events.

When JavaScript events occur, you can use a JavaScript event handler (or an event listener) to detect them and perform a specific task or set of tasks. By convention, the names for event handlers always begin with the word “on”, so an event handler for the click event is called onclick, similarly, an event handler for the load event is called onload, event handler for the blur event is called onblur, and so on.

There are several ways to assign an event handler. The simplest way is to add them directly to the start tag of the HTML elements using the special event- handler attributes. For example, to assign a click handler for a button element, we can use onclick attribute, like this:

However, to keep the JavaScript separate from HTML, you can set up the event handler in an external JavaScript file or within the <script> and </script> tags, like this:

In general, the events can be categorized into four main groups — mouse, events, keyboard events, form events, and document/window events.

Mouse Events

A mouse event is triggered when the user clicks some element, moves the mouse pointer over an element, etc. Here’re some most important mouse events and their event handler.

The Click Event (onclick)

The click event occurs when a user clicks on an element on a web page. Often, these are form elements and links. You can handle a click event with an onclick event handler.

The Contextmenu Event (oncontextmenu)

The contextmenu event occurs when a user clicks the right mouse button on an element to open a context menu. You can handle a contextmenu event with an oncontextmenu event handler.

The Mouseover Event (onmouseover)

The mouseover event occurs when a user moves the mouse pointer over an element. You can handle the mouseover event with the onmouseover event handler.

The Mouseout Event (onmouseout)

The mouseout event occurs when a user moves the mouse pointer outside of an element. You can handle the mouseout event with the onmouseout event handler.

Keyboard Events

A keyboard event is fired when the user presses or release a key on the keyboard. Here’re some most important keyboard events and their event handler.

The Keydown Event (onkeydown)

The keydown event occurs when the user presses down a key on the keyboard. You can handle the keydown event with the onkeydown event handler.

The Keyup Event (onkeyup)

The keyup event occurs when the user releases a key on the keyboard. You can handle the keyup event with the onkeyup event handler.

The Keypress Event (onkeypress)

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, Arrow keys, etc. will not generate a keypress event but will generate a keydown and keyup event.

You can handle the keypress event with the onkeypress event handler.

A form event is fired 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 Focus Event (onfocus)

The focus event occurs when the user gives focus to an element on a web page.

You can handle the focus event with the onfocus event handler. The following example will highlight the background of text input in yellow color when it receives the focus.

The Blur Event (onblur)

The blur event occurs when the user takes the focus away from a form element or a window.

You can handle the blur event with the onblur event handler.

The Change Event (onchange)

The change event occurs when a user changes the value of a form element.

You can handle the change event with the onchange event handler.

The Submit Event (onsubmit)

The submit event only occurs when the user submits a form on a web page. You can handle the submit event with the onsubmit event handler.

Document/Window Events

Events are also triggered in situations when the page has loaded or when the user resizes the browser window, etc.

The Load Event (onload)

The load event occurs when a web page has finished loading in the web browser.

The Unload Event (onunload)

The unload event occurs when a user leaves the current web page. You can handle the unload event with the onunload event handler.

The Resize Event (onresize)

The resize event occurs when a user resizes the browser window. The resize event also occurs in situations when the browser window is minimized or maximized.

You can handle the resize event with the onresize event handler.

If you liked our content JavaScript Events, then you will also like JavaScript Operators