JavaScript Events


An event occurs when a user interacts with a web page, such as when he clicks a link or button, enters text into an input or textarea, selects something in a select box, presses a key on the keyboard, moves the mouse pointer, submits a form, and so on. In some circumstances, such as the page load and unload events, the Browser can initiate the events.

When an event occurs, you may detect it with a JavaScript event handler (or an event listener) and perform a specified activity or collection of activities. Event handler names usually begin with the word "on," therefore an event handler for the click event is named onclick, an event handler for the load event is called onload, an event handler for the blur event is called onblur, and so on.

An event handler can be assigned in a variety of ways. The simplest method is to use the special event-handler attributes to add them straight to the start tag of the HTML components. For example, we can use the onclick property to attach a click handler to a button element.

Example

Preview

Events in Javascript provide for a dynamic interface to a webpage. These events are linked to Document Object Model components (DOM). These events are propagated upwards in the DOM from children to parent by default. Events could be bound inline or in an external script.


Mouse Events

When a user clicks an element or moves the mouse pointer over an element, a mouse event is triggered. Here are some of the most essential mouse events, along with associated event handlers.

1. The Click Event (onclick)

When a user clicks on an element on a web page, the click event happens. These are frequently form components and connections. An onclick event handler can be used to handle a click event.

Example

Preview

2. The Contextmenu Event (oncontextmenu)

When a user presses the right mouse button on an element to access a context menu, the contextmenu event happens.

Example

Preview

3. The Mouseover Event (onmouseover)

When a user moves the mouse cursor over an element, the mouseover event happens. The onmouseover event handler may be used to handle the mouseover event.

Example

Preview

4.The Mouseout Event (onmouseout)

When a user drags the mouse pointer outside of an element, the mouseout event happens. The onmouseout event handler may be used to handle the mouseout event.

Example

Preview

Keyboard Events

When a user presses or releases a key on the keyboard, a keyboard event is triggered. Here are some of the most essential keyboard events and event handlers. 

1. The Keydown Event (onkeydown)

When a user hits a key on the keyboard, the keydown event happens. The onkeydown event handler can be used to handle the keydown event.

Example

Preview

2. The Keyup Event (onkeyup)

When a user releases a key on the keyboard, the keyup event happens. The onkeyup event handler may be used to handle the keyup event.

Example

Preview

3. The Keypress Event (onkeypress)

When a user presses a key on the keyboard that has a character value associated with it, the keypress event occurs. Ctrl, Shift, Alt, Esc, Arrow keys, and so on will not generate a keypress event, but will instead generate a keydown and keyup event. The onkeypress event handler can be used to handle the keypress event.

Example

Preview

Form Events

When a form control receives or loses attention, or when the user modifies a form control value, such as by putting text into a text input or selecting any item in a pick box, a form event is called. Here are some of the most significant form events and event handlers.

1. The Focus Event (onfocus)

When a user grants focus to an element on a web page, the focus event happens. The onfocus event handler may be used to handle the focus event.

Example

Preview

2. The Blur Event (onblur)

When the user moves the attention away from a form element or a window, the blur event happens. The onblur event handler can be used to handle the blur event.

Example

Preview

3. The Change Event (onchange)

When a user changes the value of a form element, the change event happens. The onchange event handler may be used to handle the change event.

Example

Preview

4. The Submit Event (onsubmit)

When a user submits a form on a web page, the submit event happens. The onsubmit event handler may be used to handle the submit event.

Example

Preview

Document/Window Events

Events are also generated after the website has loaded or when the user resizes the browser window, among other things. Here are some of the most essential document/window events, along with associated event handlers.

1. The Load Event (onload)

When a web page has finished loading in the web browser, the load event happens. The onload event handler may be used to handle the load event.

Example

Preview

2. The Unload Event (onunload)

When a user departs the current web page, the unload event happens. The onunload event handler can be used to handle the unload event.

Example

Preview

3. The Resize Event (onresize)

When a user resizes the browser window, the resize event happens. The resize event is also triggered when the browser window is reduced or maximized. The onresize event handler can be used to handle the resize event. When you resize the browser window to a new width and height, the following example will display an alert message.

Example

Preview

FAQs

JavaScript events are actions or occurrences that happen in a web browser, such as a user clicking a button, hovering over an element, or submitting a form. Events allow developers to respond to user interactions and trigger specific actions or functions in their JavaScript code. By attaching event handlers to HTML elements, developers can define how the web page should respond when a particular event occurs. JavaScript events are instrumental in creating interactive and dynamic web applications, enabling user interactivity and enhancing the overall user experience.

JavaScript provides several methods for handling events. The most common approach is to use the addEventListener() method, which allows you to attach an event listener to an HTML element. With addEventListener(), you specify the type of event you want to listen for (e.g., "click", "mouseover", "submit") and the function that should be executed when the event occurs. Another approach is to use inline event handlers directly in HTML attributes, such as onclick, onmouseover, or onsubmit, where you assign a JavaScript function to be executed when the corresponding event occurs. Both approaches provide flexibility in responding to events and executing the desired functionality.

In JavaScript, you can prevent the default behavior of an event using the preventDefault() method. When an event occurs, such as submitting a form or clicking a link, the browser performs a default action associated with that event. However, by calling preventDefault() within the event handler function, you can stop the browser from executing its default behavior. This can be useful in scenarios where you want to customize or override the default behavior of certain events. For example, you can prevent a form from submitting or prevent a link from navigating to a new page. By preventing the default behavior, you gain more control over how events are handled and can implement custom functionality as needed.