For further actions, you may consider blocking this person and/or reporting abuse
Read next
State Space Models Power New AI that Both Understands and Creates Images More Efficiently
Mike Young -
Language Models Learn Shortcuts Instead of True Reasoning, Study Shows
Mike Young -
500M Parameter AI Model Matches Giant Audio Models in Reasoning Tasks, Uses 83% Less Computing Power
Mike Young -
New AI System Determines 3D Object Position from Single Photo, Outperforms Existing Methods with 90% Accuracy
Mike Young -
Top comments (2)
Bubbling happens when an event is actually fired on an element, it will first handle the event on itself, then the event on it's parent(if any) and continue till it reaches the body and the root element.
Imagine you have a P tag inside a DIV tag which is inside the BODY tag, and all three of them have a "click" event listener. Now you click on the P. The event on P will fire first, followed by the event on DIV, followed by the event on BODY.
This is just like the bubbles which rise from the bottom to the top in a carbonated drink, hence the name bubbling.
Event delegation is a technique by which you can add an event listener on a parent element and perform that event on it's child element. This is necessary to understand because you may not have access to the element currently(maybe it is created after an API call return) so you can set the event handler on it's parent which you have created yourself.
Another usecase is that it can save you alot of time if you have numerous same type of elements and you want all of them to have the same event, you can set the event handler on it's parent and use the event.target property to know on which child element the event happened and use it accordingly.