Event Delegation - jellyfish-tom/TIL GitHub Wiki

[SOURCES]

• https://www.youtube.com/watch?v=MY0UBGX2FtA
• https://javascript.info/event-delegation

1. Event Capturing vs Event Bubbling

Capturing and bubbling allow us to implement one of most powerful event handling patterns called event delegation.

• capturing - event going DOWN the DOM tree
• bubbling - event going UP the DOM tree

Bubbling usage: the idea is that if we have a lot of elements handled in a similar way, then instead of assigning a handler to each of them – we put a single handler on their common ancestor.

1. Event.Target vs Event.CurrentTarget

target - what you actually clicked in/interacted with. Element that triggered the listener currentTarget - element with the listener attached to it

They often might not be the same. Ex. when you type in input inside a form, but eventListener is attached to top form element. When event bubbles from input upwards it will eventually reach that top form element. EventListener attached to that form element will fire and at that time:

• target === input, but
• current target === top form element