JavaScript Event Listeners
An event listener is a JavaScript
method that detects and responds to user interactions, such as clicks, typing,
scrolling, or mouse movements. An event
listener waits for a specific action (event) to happen on an element and
then runs a function.
Common Events
- click
- submit
- input
- change
- mouseover
- keydown
Basic Syntax
element.addEventListener(event,
callback);
For instance,
The browser listens for a ‘click’ event. When clicked, the function executes
Using Arrow Function
Removing an Event Listener
Removing an event listener means stopping an element from responding to a specific event that was previously attached to it.
You must pass the same function reference.
2. Event Object
The Event
Object is an object automatically passed to an event handler
that contains information
about the event that occurred. That is, when an event occurs, JavaScript provides an event object.
Useful
properties:
- event.target =>
element that triggered the event
- event.type => event name
- event.preventDefault() => stop default behavior
Prevent Form Submission
3. Event Bubbling
Event
bubbling is a phase in the DOM event flow where an event starts from
the target element and bubbles up to its ancestors (parent → grandparent
→ document). It is the default behavior
for most DOM events.
Events bubble up from the target element to its parent elements.
Clicking
the button logs the following:
Child clicked
Parent clicked
4. Event Delegation
Event delegation is a technique where a single
event listener on a parent element handles events for its child elements, even if the children
are added dynamically.
It
leverages event bubbling to
detect which child triggered the event.
Instead
of attaching event listeners to many child elements, attach one listener to a parent and detect
the target.
This gives:
- Better performance
- Works for dynamically added
elements
- Cleaner code
Example Without Delegation
Problems:
- Many
listeners
- New <li>
elements won’t work
Example With Event Delegation
One listener handles all list items, even new ones.
5. Event Delegation with Classes
Perfect for:
- Todo
lists
- Tables
- Cards
- Dynamic
dashboards
Event Capturing in JavaScript
Event capturing is a phase of the DOM Event Flow
where the event starts from the top of the document and travels down to the target
element.
The event flow has three phases:
1.
Capturing phase – Event moves from document → parent → child → target
2.
Target phase
– Event reaches the clicked element
3.
Bubbling phase – Event moves from target → parent → document
Default JavaScript events usually use bubbling, not capturing.
Example of Event Capturing
Important Part
true
The third parameter, true,
tells JavaScript to use capturing.
JavaScript Event Listeners Summary
-
Event Listeners: A method that detects user interactions (like clicks or typing) and executes a function when the event occurs.
-
Event Object: An object automatically passed to event handlers containing information about the triggered event.
-
Event Bubbling: The default DOM behavior where an event starts at the target element and moves up through its parent elements.
-
Event Delegation: A technique where a parent element handles events for its child elements using a single event listener.
Event Capturing: A phase where the event travels from the document down to the target element before bubbling.
0 Comments