Propagation may seem like a design flaw, but in this video, see why it's useful and when it should be stopped. The instructor looks at a common problem with buttons and shows how to fix it.
- [Instructor] In our next section,…we'll be talking about event propagation.…And the problem is buttons don't float in space.…Instead the DOM is more like an aquarium.…You can't move through it without touching other elements.…Another problem is that any of those things…can have a click listener.…And on your way down to the button…you could be clicking through containing divs,…and other elements.…So why do we even need propagation?…Surely this is a design flaw, right?…Why would I need everything in the DOM to receive my clicks?…Well, it is intentional, and it actually can help us.…
If we click on a card where we add…the event listener everything is fine.…But what happens when we click on the middle of the card?…We're actually clicking on the child of the card container…so we need that child to bubble up,…and let the card container know there was a click.…To add to the complexity,…the event click has two phases.…There's a capture phase, and a bubble phase.…By default, the bubble phase is listening,…and the capture is off.…
- Working with prototype and dynamic elements
- Using bind, call, and apply
- Using the Fisher–Yates formula
- When to use e.preventDefault() and when to avoid it
- Drag-and-drop life cycle
- Using prototypical inheritance to optimize your code
Skill Level Intermediate
Q: This course was updated on 1/16/2019. What changed?
A: The following topics were updated: propagation and drag and drop.