# DOM Events Notes

## From Live Code Demo

### Feature: When a user clicks on the `awesome` button, remove the first paragraph, and replace it with an image

Image to use: https://media.giphy.com/media/mbhseRYedlG5W/giphy.gif

### Feature: When a user clicks on the `generate-coffee-table` button, generate a 3x3 grid that has the same images of coffee in each cell

Image to use: https://media.giphy.com/media/l09Cqx9PUMCPi8H65V/giphy.gif

## Comma vs. + in `console.log` and `alert`

This was a complete brain fart on my part. I equated the comma with string concatention for both `alert` and `console.log`. The comma passed the `this.firstName` as a separate argument instead

- [`console.log` docs](https://developer.mozilla.org/en-US/docs/Web/API/Console/log)
- [alert docs](https://developer.mozilla.org/en-US/docs/Web/API/Window/alert)

## Morning Review

### Feature: Using Event Delegation, when the user clicks, on the "Click to Subscribe" button, reveal a form to submit an email

We can add certain behaviors to our elements using event delegation. There are 2 steps:

1. Add a [custom/global attribute](https://developer.mozilla.org/en-US/docs/Web/HTML/Global_attributes/data-*) to an element that describes its behavior
2. Add an event listener to the `document`. That way, it will track certain events, dnd if an event happens on the specified element in step 1, run the action.

### Debugging CSS

MDN has an [article](https://developer.mozilla.org/en-US/docs/Learn/CSS/Building_blocks/Debugging_CSS) on it

But as I said in the review, I really like to add borders around things and see how things move relative to the border, and playing around with the dev tools.

---

## `this` review

A function's `this` references the execution context for that call, determined ENTIRELY by how the function was called.

This means that a "this-aware" function can have a different context each time it's called.

## There are 4 ways to call a function

- Implicitly
- Explicitly
- Using `new`
- Default

## There is an order of precedence in which `this` is determined

Before we get there, though:

1. Is it an arrow function?
- The `this` is in the scope where it was defined
- Fun fact: Arrow functions don't have a `this` context. See example below
- [Example: Arrow "this"](https://repl.it/join/bftchwbc-b17z)
2. Is the function called by new?
- The `this` is the new instance object
- [Example: `new` `this`](https://repl.it/join/msjdtknr-b17z)
3. Is the function called by `call()` or `apply()` (Note: `bind()` uses `apply()`)
- The `this` is the object passed into the first argument of `bind`, `call`, `apply`
- [Example: Explicit `this`](https://repl.it/@b17z/The-Explicit-This)
4. Is the function called on a context object?
- The `this` is the object
- [Example: Implicit `this`](https://repl.it/join/vugvqbpt-b17z)
5. Default: global object (except in `strict` mode)
- [Example: default `this`](https://repl.it/join/rsldkhld-b17z)

---

## Exit Ticket Solutions

**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](https://developer.mozilla.org/en-US/docs/Web/API/EventTarget/addEventListener)

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

### What are the 3 phases of event propagation?

1. Capture
2. Target
3. Bubbling
- _Reference_: [An Introduction to DOM Events](https://www.smashingmagazine.com/2013/11/an-introduction-to-dom-events/#event-phases)

### 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. Allows a common ancestor do work that would have been otherwise repetitive over many different children.

### How do you stop an event from bubbling?

- `.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.