Skip to main content

Events in Javascript

JavaScript events are user actions or system occurrences, like mouse clicks, keyboard presses, or page loads.

Events are the browser's way of indicating when something has happened (such as when a page has finished loading or a button has been clicked) so that JavaScript can respond to these events by executing any code that needs to run.

JavaScript provides a range of built-in events that developers can use to create interactive web applications, including:

Mouse events​

Mouse events are triggered by user interactions with the mouse, such as clicking, hovering, and scrolling.

As an example:

Editor

Loading...

In this example:

  • There is a button with the ID myButton that has three mouse events attached to it: onclick, onmouseover, and onmouseout.

  • The onclick event is handled by the handleClick() function, which displays an alert when the button is clicked.

  • The onmouseover event is handled by the handleMouseOver() function, which changes the background color of the button to yellow when the mouse is over it.

  • The onmouseout event is handled by the handleMouseOut() function, which changes the background color of the button back to white when the mouse moves away from it.

Keyboard events​

Keyboard events are triggered by user interactions with the keyboard, such as pressing a key or holding down a key for a certain amount of time.

As an example:

Editor

Loading...

In this example:

  • There is a text input with the ID myInput that has a keyboard event attached to it: onkeypress.

  • The onkeypress event is handled by the handleKeyPress(event) function, which takes an event parameter.

  • This function checks if the key pressed is the Enter key (which has a code of 13), and displays an alert if it is.

info

Note that the function uses the keyCode and which properties of the event object to get the code of the key that was pressed. This is because different browsers use different properties to represent the key code.

Form events​

These events are triggered by changes to form elements, such as when a user types in an input field or selects an option from a drop-down list.

As an example:

Editor

Loading...

In this example:

  • There is a form with name and email input fields and a submit button.
  • The form has a submit event attached to it: onsubmit.
  • The onsubmit event is handled by the handleSubmit(event) function.
  • The handleSubmit(event) function prevents form submission using preventDefault() method.
  • It gets input values using the FormData object.
  • It displays form data in an alert using the alert() method.
info

The name attribute is used to identify the input fields in the FormData object. Also, the type attribute of the email input field is set to email to ensure that the input is a valid email address.

Window events​

Window events are triggered by changes to the window, such as when the window is resized or scrolled. These events are useful for creating responsive web applications that adapt to different screen sizes.

As an example:

Editor

Loading...

In this example:

  • There is a div element with the ID size that displays the size of the window.

  • The body element has a resize event attached to it: onresize.

  • The onresize event is handled by the handleResize() function,

  • Which gets the width and height of the window using the innerWidth and innerHeight properties of the window object.

  • It then sets the content of the size element using the innerHTML property.

info

The onresize event is attached to the body element, which means that the function will be called whenever the window is resized. If you want to listen for other window events, you can attach the event to the window object instead of the "body" element.

Document events​

These events are triggered by changes to the document, such as the "page finishing loading" or the "user scrolling the page".

As an example:

Editor

Loading...

In this example:

  • The body element has two document events attached to it: onload and onunload.
  • The onload event is triggered when the page finishes loading,
  • The onunload event is triggered when the page is unloaded (e.g., when the user navigates away from the page).
Browser Event Support

Not all browsers support every document event, and some of them have been deprecated. Always verify browser compatibility and current standards before using document events in your web application.