Content: Event delegation, custom events
Event Delegation
When you need to add an event to all child elements, it’s more efficient to use event delegation.
- In JavaScript, you can use
event.target
. - In jQuery, you can use the
on
method to bind events.
1 | // Traditional way of binding events |
Custom Events
1. Binding Custom Events in jQuery
- Use the
on
method to bind custom events. - Use the
trigger("event name")
method to trigger custom events.
1 | // Binding a custom event |
2. Implementing Custom Events in JavaScript
- Add a
listener
property to the object element. - Within the
listener
property, add an attribute with the custom event name. - Store an array of event handling functions as the attribute value.
Here’s the code:
1 | // Binding an event |
Testing and using custom events:
1 | // Testing the use of custom events |
After adding custom events, the format looks like this:
1 | // Format: |