DEV Community

Kelan6
Kelan6

Posted on

PHASE 1 BLOG: review.addEventListener("")

Phase 1 review

Phase 1 will be in the books after our project presentation today. Feeling a tad accomplished but mostly weary of Phase 2. The amount of knowledge downloaded in 3 weeks is wild! To end every Phase, we have a project week. I learned a lot from all of Phase 1 but had the most fun during project week. Here are some fun topics learned:

  1. JavaScript Fundamentals
  • Strings

  • Variables

  • Functions (Callbacks and Arrow)

  • Arrays / Objects

  1. Manipulating the DOM
  • Document Object Model

  • getElementById

  • querySelector(all)

  1. JavaScript Events and Communicating with the Server
  • addEventListener ("onClick")

  • DOM Content Loaded

  • GET/POST/PATCH/DELETE

  • JSON (DERULO)

and more....

On to REACT!

add.EventListener

Although I would argue callback and arrow functions are the most important thing to master in Phase 1, adding event listeners was the most rewarding for me.

For me, when our cohort started using event listeners, everything started moving. Event listeners "listen" for an action like "click" or "key press". Once triggered, they invoke the event handler functions to start working on the event.

Think clicking on a comment button or hitting that like ♥ button on IG.

 "`document.addEventListener("click", myFunction);`" 
                 - w3schools
Enter fullscreen mode Exit fullscreen mode

"<form id="search-form" onsubmit="searchByAbv(event)"
autocomplete="off">
"

Without event listeners, our web pages couldn't function. Event listeners make interaction with the users fun and dynamic. As I look back on our Phase 1 project with my partner John, I count 10+ event listeners! I can only imagine a more in depth website and the number of event listeners.

Sources:

w3schools
https://www.w3schools.com/jsref/met_element_addeventlistener.asp

Flatiron Canvas https://learning.flatironschool.com/courses/5206

Sweet Code
https://sweetcode.io/understanding-the-javascript-dom-manipulations/

MDN web docs
https://developer.mozilla.org/en-US/docs/Web/API/Element#mouse_events

Top comments (1)

Collapse
 
btdavis300 profile image
Brennan Davis

Short, sweet, and to the point. Very concise info!