Event Listeners

Example of using event listeners and exploring event propagation:

// Adding a basic click event listener
document.getElementById("btn").addEventListener("click", function () {
  alert("Button clicked!");
});

// Event propagation: Bubbling
document.getElementById("child").addEventListener("click", function () {
  console.log("Child clicked");
});

document.getElementById("parent").addEventListener("click", function () {
  console.log("Parent clicked");
});

// Using options
document.getElementById("btn").addEventListener("click", function () {
  console.log("This will run only once.");
}, { once: true });
          

This code demonstrates:

• Attaching basic click event listeners to DOM elements.
• Understanding event bubbling where events propagate from child to parent.
• Using options like once to limit listener execution.

Event listeners in JavaScript enable the detection and response to user interactions and other events on the page. You can use the addEventListener() method to attach handlers for different types of events such as click, keydown, mouseover, and more.

Key concepts include:

• Bubbling: Events start from the target element and bubble up to ancestors.
• Capturing: Events are captured from the root down to the target.
• Options: Listener configurations like once (run only once), capture (use capture phase), and passive (improves performance).
• Removing Listeners: Use removeEventListener() to detach a previously attached event listener.

• Handling user interactions like clicks, inputs, and gestures.
• Validating form fields in real-time.
• Implementing custom UI components such as modals, tooltips, or dropdowns.
• Tracking user activity for analytics or engagement purposes.
• Building reactive and interactive interfaces in modern JavaScript frameworks.