Handling Events in JavaScript

What Are Events?

Note

• Events are actions or occurrences that happen in the browser, such as a user clicking a button, typing in a form, or the page finishing loading.
• JavaScript allows developers to listen for and respond to various user actions or other events, such as clicks, mouse movements, key presses, or page loading.
• This is done using event listeners (or handlers), which are functions that are executed when a specific event occurs.
• Events are a core part of JavaScript programming, enabling developers to create interactive and dynamic web applications.

Types of Events

Here are some common event types:

• Mouse events: Click, mouseover, mouseout, mousedown, mouseup, etc.
• Keyboard events: keydown, keyup, keypress
• Form events: submit, change, input, focus, blur
• Document events: load, DOMContentLoaded, resize, scroll
• Media events: play, pause, ended, volumechange
• Other events: touch events, focus, and blur events

Tip

Each event represents a state change in the browser or user interface.

Event Handlers: What Are They?

---

Note

An event handler is a function that gets called when a specified event occurs. It’s a callback function that you associate with a particular event on an HTML element or a JavaScript object.

Adding Event Listeners

---

There are three main ways to add event handlers to an element in JavaScript:

1. Inline Event Handler

---

Inline event handling involves adding event handler code directly to HTML elements as event attributes. This approach is generally not recommended due to maintainability issues.

<button onclick="alert('Button clicked!')">Click Me</button>

html

2. Using the onclick Property

---

• This method allows setting a function as an event handler for an element.
• If there is already an event handler assigned using onclick, it will be overwritten by a new one.

const button = document.querySelector("button");
button.onclick = function() {
  alert("Button clicked!");
};

javascript

3. Using the addEventListener()

---

Note

• The addEventListener() method is the preferred modern approach for attaching event handlers.
• It offers more flexibility and allows multiple event listeners for the same event type.

Syntax:

element.addEventListener(event, function, useCapture);

javascript

• event: The name of the event (e.g., “click”, “keydown”).
• function: The callback function to be executed when the event occurs.
• useCapture (optional): A boolean that specifies whether the event should be captured during the capturing phase (true) or the bubbling phase (false, default).

Example: of using addEventListener to handle a button click event:

const element = document.getElementById("elementId");
element.addEventListener("click", function() {
  alert("Element clicked!");
});

javascript

How addEventListener() Works?

---

1. element: This refers to a specific DOM (Document Object Model) element on the web page, like a button, a div, or any HTML element you can interact with. You would typically get this element using methods like document.getElementById(), document.querySelector(), etc.

2. addEventListener: This is a method that attaches an event handler (a function) to the specified element. It listens for an event (like a mouse click, key press, etc.) and runs a function when that event happens.

3. 'event': This is a string that specifies the type of event you’re listening for. Common events include:

   • 'click': Triggered when the element is clicked.
   • 'mouseover': Triggered when the mouse pointer is over the element.
   • 'keydown': Triggered when a key is pressed down.
   • 'submit': Triggered when a form is submitted.

4. function: This is the callback function that will run when the event occurs. The function contains the code you want to execute when the event is triggered. It can be an anonymous function, like:

   function() {
       console.log("Element clicked!");
   }

   js

   Or a named function, like:

   function handleClick() {
       console.log("Element clicked!");
   }

   js

Removing Event Listeners

To remove an event listener, you can use the removeEventListener() method. This is useful for cleaning up or detaching events when they’re no longer needed.

const button = document.querySelector("button");

function clickHandler() {
  alert("Button clicked!");
}

button.addEventListener("click", clickHandler);
button.removeEventListener("click", clickHandler);

javascript

Event Propagation

Events in JavaScript can propagate in two phases:

1. Capturing Phase

Before bubbling, events go from the root down to the target element:

root → ... → grandparent → parent → element

plaintext

You can control which phase the event listener will be active in by setting the useCapture, the third parameter of addEventListener:

element.addEventListener('click', handler, true); // true enables capturing phase
// Or with the options object syntax:
element.addEventListener('click', handler, { capture: true });

javascript

2. Bubbling Phase

The event bubbles back up from the target element to the outermost element. By default, events “bubble” up from the target element to the root of the document:

element → parent → grandparent → ... → root

plaintext

You can prevent this bubbling behavior by using event.stopPropagation() in your event handler.

The Event Object

---

When an event is triggered, an event object is automatically passed to the event handler function. This object contains useful information about the event, such as the target element, the type of event, and other details.

button.addEventListener('click', function(event) {
    console.log(event); // The event object
    console.log(event.type); // "click"
    console.log(event.target); // The element that triggered the event
});

javascript

Common Event Object Properties

• event.type: The type of event (e.g., “click”, “keydown”)
• event.target: The element that triggered the event
• event.currentTarget: The element that the event handler is attached to
• event.timeStamp: The time when the event occurred
• event.bubbles: Boolean indicating if the event bubbles up the DOM tree
• event.cancelable: Boolean indicating if the event can be canceled
• event.defaultPrevented: Boolean indicating if preventDefault() has been called

Event-specific properties:

• Mouse events: clientX, clientY, pageX, pageY, screenX, screenY, button, buttons, altKey, ctrlKey, shiftKey, metaKey
• Keyboard events: key, code, keyCode (deprecated), altKey, ctrlKey, shiftKey, metaKey
• Form events: Form elements often include properties like value, checked, selected, etc.

Common Event Object Methods

• event.preventDefault(): Prevents the default browser behavior for the event
• event.stopPropagation(): Stops the event from bubbling up the DOM tree
• event.stopImmediatePropagation(): Stops both bubbling and prevents other handlers on the same element

preventDefault() and stopPropagation()

• preventDefault(): Prevents the default behavior of the event. For example, prevent a form from submitting.

  form.addEventListener("submit", function(event) {
    event.preventDefault();
    console.log("Form submission prevented.");
  });

  javascript

• stopPropagation(): Stops the event from propagating (bubbling or capturing).

  element.addEventListener("click", function(event) {
    event.stopPropagation();
    console.log("Event propagation stopped.");
  });

  javascript

Custom Events

You can create and dispatch your own events using the CustomEvent constructor.

Example: Creating and Dispatching Custom Events

// Create a custom event
const myEvent = new CustomEvent('myCustomEvent', {
  detail: { message: 'Hello from custom event!' },
});

// Add a listener
document.addEventListener('myCustomEvent', (e) => {
  console.log(e.detail.message);
});

// Dispatch the event
document.dispatchEvent(myEvent);

javascript

Most Common Events Types

---

Event Type	Description
Mouse Events
click	Fired when a mouse button is clicked.
dblclick	Fired when a mouse button is double-clicked.
mousedown	Fired when a mouse button is pressed down.
mouseup	Fired when a mouse button is released.
mousemove	Fired when the mouse pointer moves.
mouseenter	Fired when the mouse enters an element.
mouseleave	Fired when the mouse leaves an element.
mouseover	Fired when the mouse pointer hovers over an element or its child elements.
mouseout	Fired when the mouse pointer leaves an element or its child elements.
Keyboard Events
keydown	Fired when a key is pressed down.
keyup	Fired when a key is released.
keypress	Fired when a key is pressed and released (deprecated).
Form Events
submit	Fired when a form is submitted.
input	Fired when an input field changes.
change	Fired when an input element changes (like a select dropdown menu).
Window Events
load	Fired when the page is fully loaded.
resize	Fired when the window is resized.
scroll	Fired when the page is scrolled.