Event delegation in JS 😃😃😃😃😃
What is Event? 🤔
Event is an interaction between Javascript and HTML that occurs when the browser or user interacts with the page. Event can be anything like a page load, button click, key press, window resizing, etc.
Event Flow
The DOM is an hierarchical model. All the objects are organized in a hierarchy, with the Window object being on the top.
The Document object contains all the objects that are loaded in the HTML. Document object is the parent to all the tags in HTML.Document object is then followed by the <html> tag and then by the <body> tag.
Event Capture
Event capture occurs when the flow of events starts from the outermost element and moves downward to the target element. This is phase 1 of event flow.
Event Bubbling
Event bubbling occurs when the flow of events starts from the innermost element and moves upward to the parent elements. Hence the name bubbling(bubbles move upwards from the bottom), this is the phase 2 of the event flow.
This is the default event flow in most of the modern browsers.
The below image shows how event bubbling occurs when the text 'hello' is clicked.
