JavaScriptDOM & Events

JavaScript Events

Learn JavaScript events, how user actions trigger code execution, and how to handle events like click, input, submit, and load in real-world applications.

What are Events in JavaScript?Link to this section

Events are actions or occurrences that happen in the browser, usually triggered by the user or the browser itself. JavaScript listens for these events and responds by executing code. Examples of events include clicking a button, typing in an input field, submitting a form, or loading a web page.

Why Events are ImportantLink to this section

Without events, web pages would be static. Events allow developers to:
  • Capture user interactions
  • Respond dynamically to actions
  • d interactive and responsive applications
Almost every modern web application depends on event handling.

Common JavaScript Events :Link to this section

Mouse Events

- click - dblclick - mouseover - mouseout

Keyboard Events

- keydown - keyup

Form Events

- submit - change - input

Browser Events

- load - resize - scroll

Handling Events in JavaScript :Link to this section

JavaScript provides multiple ways to handle events, but the most recommended approach is using addEventListener.

Using addEventListener :Link to this section

The addEventListener method attaches an event handler to an element without overwriting existing handlers.
Explanation: When the button is clicked, the function runs automatically.

Inline Event Handling (Not Recommended) :Link to this section

Events can be written directly inside HTML attributes.

warning

Inline event handlers mix JavaScript with HTML and are not recommended for scalable applications.

The Event Object :Link to this section

When an event occurs, JavaScript creates an event object that contains details about the event.
Explanation : The event object provides information such as event type, target element, and mouse position.

Event Target :Link to this section

The event.target property refers to the element that triggered the event.

Preventing Default Behavior :Link to this section

Some elements have default actions, such as form submission or link navigation.

note

Note contentThis is commonly used in form validation and single-page applications.

Event Bubbling :Link to this section

Event bubbling means an event starts from the target element and propagates upward through parent elements. Explanation example: Clicking a button inside a div triggers the button’s event first, then the div’s event.

tip

Understanding event bubbling helps handle complex UI interactions efficiently.

Removing Event Listeners :Link to this section

Event listeners can be removed using removeEventListener.

Events in Real-World Applications :Link to this section

Events are used for:
  • Form validation
  • Button clicks
  • Modal popups
  • Navigation menus
  • Real-time updates
Mastering events is essential for frontend development and frameworks like React.
Check Your Understanding
Question 1 of 4

What is an event in JavaScript?

Practice Challenges

easy
  • Create a button and log a message when it is clicked.
  • Detect when a user types in an input field and log the value.
  • Prevent a form from submitting and display a custom message.
  • Log which element was clicked using event.target.