Published by: Sujan
Published date: 16 Jun 2021
A JavaScript event is something that happens when the user interacts with the web page, such as when he clicked a link or button, entered text into an input box or textarea, made selection in a select box, pressed key on the keyboard, moving 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 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:
{PHOTO}
However, to keep the JavaScript seperate from HTML, you can set up the event handler in an external JavaScript file or within the tags, like this:
{PHOTO}
In general, the events can be categorized into four main groups — mouse, events, keyboard events, form events and document/window events.
A mouse event is triggered when the user click some element, move the mouse pointer over an element, etc. Here're some most important mouse events and their event handler.
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.
{PHOTO}
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.
{PHOTO}
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.
{PHOTO}
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.
{PHOTO}
A keyboard event is fired when the user press or release a key on the keyboard. Here're some most important keyboard events and their event handler.
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.
{PHOTO}
The keyup event occurs when the user releases a key on the keyboard. You can handle the keyup event with the onkeyup event handler.
{PHOTO}
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.
{PHOTO}
A form event is fired when a form control receive or loses focus or when the user modify a form control value such as by typing text in a text input, select any option in a select box etc.
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.
{PHOTO}
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.
{PHOTO}
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.
{PHOTO}
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.
{PHOTO}
Events are also triggered in situations when the page has loaded or when user resize the browser window, etc.
The load event occurs when a web page has finished loading in the web browser.
{PHOTO}
The unload event occurs when a user leaves the current web page. You can handle the unload event with the onunload event handler.
{PHOTO}
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.
{PHOTO}