Exit Ticket: Day 4 - DOM Events, Pixelate

day04-exit-ticket.md

Exit Ticket: Day 4 - DOM Events, Pixelate

You should be able to:

• Set up event listeners to handle DOM events
• Explain the concepts of event delegation, event bubbling, and event delegation
• Be able to stop an event from bubbling

In JavaScript, what can you attach to your elements to deal with events?

• Event Listeners

target.addEventListener(type, listener [, options]);
target.addEventListener(type, listener [, useCapture]);

What are the 3 phases of event propagation?

1. Capturing Phase
2. Target Phase
3. Bubbling Phase

• Reference: An Introduction to DOM Events

What is the main purpose of event delegation?

• To write an event listener once on a parent node and have it propagate through all the elements between the parent and the target. This allows a common ancestor do work that would have been otherwise repetitive over many different children.

How do you stop an event from bubbling?

• event.stopPropogation()
  • This prevents any callbacks from being fired on any nodes further along the event chain, but it does not prevent any additional callbacks of the same event name from being fired on the current node.