Welcome to the Treehouse Community

Want to collaborate on code errors? Have bugs you need feedback on? Looking for an extra set of eyes on your latest project? Get support with fellow developers, designers, and programmers of all backgrounds and skill levels here with the Treehouse Community! While you're at it, check out some resources Treehouse students have shared here.

Looking to learn something new?

Treehouse offers a seven day free trial for new students. Get access to thousands of hours of content and join thousands of Treehouse students and alumni in the community today.

Start your free trial

JavaScript

Posted by Greg Schudel
Greg Schudel
4,090 Points

why no query selector used here?

Why did he use a two variables here and not just a query selector?

ul.addEventListener('click' , (e) => {


  if (e.target.tagName === "BUTTON") { // why is this in all caps? Does it matter?

      const li = e.target.parentNode; // why doesn't he just use a query selector?
      const ul = li.parentNode;
      ul.removeChild(li);

  } 

});

2 Answers

Steven Parker
Steven Parker
243,656 Points
Steven Parker
Steven Parker
243,656 Points

By using traversal properties relative to the event target (e.target), the same handler can be used to respond to multiple elements. If the code used a selector function, it would always work on just one element.

And the capitalized name is important for the comparison because that is how tagNames are stored.

Greg Schudel
Greg Schudel
4,090 Points

what do you mean 'handler' you mean the function?

Steven Parker
Steven Parker
243,656 Points
Steven Parker
Steven Parker
243,656 Points

The handler is the function passed as the 2nd argument to "addEventListener". It will run each time the event happens.

Greg Schudel
Greg Schudel
4,090 Points
Greg Schudel
Greg Schudel
4,090 Points

The handler is the function passed as the 2nd argument to "addEventListener". It will run each time the event happens.

So for every function there is a 2nd argument that always gets passed. This in every situation?

Is it name e for event object in this case?

Steven Parker
Steven Parker
243,656 Points
Steven Parker
Steven Parker
243,656 Points

This does not apply to every function. I was referring to the second argument of the "addEventListener" function. It takes two arguments, the first identifies the event and the second one is the function that will be called when the event occurs.

The name of the parameter used for the event object is whatever you decide. This code names it "e".