Understanding Event Bubbling & Event Delegation
Note: This blogpost operates on the assumption that you already know what parent-child element relationships and event listeners are.
Above you can see a simple HTML form element with a submit button nested inside a class element, and on the user’s side of things it looks like this;
Event bubbling still allows for potential new elements or nodes to be rendered because the ancestor of the original element that the listener was called on had been made aware of the changes on its descendant.
Event delegation comes into play here when we add a new task “Walk the dog” to the previously empty unordered list element called
collection. Now that new list item element is appended to the DOM with an accompanying delete button.
In order to remove that newly created task from our page, we need to once again take event bubbling into consideration alongside event delegation. In our code, the delete button triggers a remove function, but instead of just calling it on itself, in this case the red X button, it will be called on the parent of the parent of itself (the list item) causing all three to be removed from the UI.
Thank you for taking the time out to read my post. Stay hydrated.