Event Propagation in Three Parts!
Tags: javascript, event, propagation, capture
Published: 2019-10-31 01:07:01

---
title: Event Propagation in Three Parts!
published: true
description: Part 1 of 3, where I'll attempt to help you understand what exactly event propagation is, how it interacts with the DOM/the end user/your code/etc..., and how you can (or probably already have) use it very easily without actually needing to understand the whys and hows. But, if you're anything like me, sometimes you just GOTTA KNOW! So.. sit back and enjoy 😌!
tags: javascript, event, propagation, capture
---


## Part 1: Event Bubbling:  
So when it comes to understanding how the EventListener object works in conjunction with event propagation, there are three basics that need to be considered: 
1. Event Bubbling
2. Event Capture 
3. Once 
 … 🤯

Event propagation can be a little tricky, especially if you haven’t solidified the terminology, or if you’re still struggling with understanding the DOM, or maybe just because event propagation sounds scary and is a little tricky in general.  Either way, we got this! Fears aside, I’m going to break event propagation down very simplistically, just like I learned 💯. 

So,

1.Let’s say you have this html:  
 ```html
  <div class="one">
    <div class="two">
      <div class="three">
      </div>
    </div>
  </div>
 ```
2.Then you add this javascript:  
 ```javascript
  <script>
    const divs = document.querySelectorAll("div");
    function logText(e) {
      console.log(this.classList.value, this);
    }
    divs.forEach(div => div.addEventListener('click', logText));
  </script>
 ```
3.And you decide to click the innermost div element (*the one that’s most nested*). 

---
##### Query:  
What class lists do you think will be logged to the console?
(Inserts Jeopardy music .. and slowly brings up the volume 🎶)


##### Solution:    
![Alt text](https://monosnap.com/image/9e07TohHo73dH1MBw6enhzBB8P6jk8)
> Wait.. three, two, one? ... Nope, hold up… 🛑 ✋🏼! What sorcery is this?  
No sorcery I promise (still waiting on my Hogwarts letter🙏), this is simply an example of event bubbling. 
---

##### Event Bubbling In a Nutshell:  
1.The target element is located on the DOM.
2.The DOM has elements that are ‘listening’ for a trigger - something to shout "HEY I DID SOMETHING!".
3.Your trigger is ‘heard’ by an **eventListener** / **eventHandler** - ‘WHAT CHU SAY????” 
4.Your listener/handler will perform the logic that’s either prescript or coded by you :D! 

… But wait… what if your trigger is never heard… Oh no!

##### Now ask yourself:
>  “If an event fires in the middle of the DOM and no listener is around to handle it, does it actually execute at all?”  


##### Answer: YUS! 
I couldn’t end the above question as eloquently as preferred,  however, the answer is still yes; the trigger still fires and will **propagate** up - *bubble upwards just like an actual bubble* - until it is either handled or reaches the topmost layer of the DOM (*your window*)!  


So, in the above example, you clicked the innermost div element, it was located within the DOM, the click event was fired and the logText() function was executed. However, because of **event bubbling** the click event continued to propagate upwards until it reaches the upper most parent element. 

---

#### Want to see it yourself?  
1.Add this line to your javascript: `document.body.addEventListener(‘click’, logText);`
2.**Refresh** your page
3.Click a `<div>` element
4.Check out your **browser’s javascript console**  👀👀👀👀, which should look something like this: 

![Visual](https://javascript.info/article/bubbling-and-capturing/eventflow.png)
###### P.S: To Open Your Browser’s JS Console:
	- **Chrome**: Go to **View > Developer > JavaScript Console**
	- **Safari**: Go to **Develop > Show JavaScript Console**
        - NOTE:You must have developer tools enabled via **Safari > Preferences > Advanced > Select the last checkbox at the bottom).**
	- **Firefox**: Don’t use it much… not a hater, just like chrome dev tools. Although Firefox’s css grid tool is pretty schweet 😍. But for now, just do a quick google search. 

##### Quick Visual to Help (*hopefully*) Picture the Process:  
![Alt text](https://monosnap.com/image/bQj7qZgPSJjViz23VtIkEvCRGNlZ79)
 - Note that the capture phase is mentioned here, which is very, very, verrrrry similar to the bubble phase, but with one major difference:

>  - Yep, you probably guessed it already (look at you go O_O!!, I’m so proud <3).  
>  - The direction is now REVERSED,  so instead of bottom-to-top event bubbling (propagation), you now have top-to-bottom event capture.

---
> p.s
>If your guess wasn’t that the direction is **reversed**, then no worries! This stuff can get a bit confusing and I probably could have described it a little (or a lot) better.  Stop sweating the small stuff, because you still made me proud for making it this far :)!  

	- More on this later :).. However, take some time to digest what you’ve learned so far.  But, before you go, I challenge you Try to think of some examples of both event propagation and event capture. 
	- Again, don’t sweat the small stuff,~ if you can’t think of any examples right now, then take some time and come back, perhaps do a little searching, or try imagining something that, although might not be code related, could still fit the schematic/process described above :)!
	- **HAVE FUN WITH IT!**