Content: Event Delegation, Custom Events
Event Delegation
Instead of adding an event listener to each child element individually, which can be inefficient, event delegation allows us to bind the event to a parent element.
- In vanilla JS, you can use the
event.target
method; - In jQuery, you can use
on
to bind events;
1 | // Previous way of binding events |
Event delegation is a powerful technique that takes advantage of the fact that events bubble up through the DOM tree. By binding a single event listener to a parent element, you can handle events from all of its descendants that match a selector.
Custom Events
1. Binding custom events with jQuery
- Bind a custom event using the
on
method; - Trigger a custom event using the
trigger("event name")
method;
1 | // Binding a custom event |
2. Implementing custom events in vanilla JS
- Add a listener property to the target object element;
- In the listener property, add attributes named after the custom events;
- These attributes hold an array of event handler functions;
Here is the code:
1 | // Binding the event |
Testing and using the custom event:
1 | // Test the use of custom events |
After adding custom events, the format is as follows:
1 | // The format is as follows |
Custom events in JavaScript provide a way to communicate across different parts of an application without coupling the event sender to the receiver, allowing for more modular and reusable code.