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 JavaScript and the DOM (Retiring) Responding to User Interaction The Event Object

Posted by ammarkhan
.a{fill-rule:evenodd;}techdegree
ammarkhan
Front End Web Development Techdegree Student 21,661 Points

What is event and target?

I am unable to understand what is a Event here, when passed into arguement and what is Target. Is it ok to say that Event can be click or keydown, whereas Target is on which element is clicked on. Maybe i am confused? Can someone explain to me in english analogy.?

2 Answers

Jonathan Dewitt
Jonathan Dewitt
8,101 Points
Jonathan Dewitt
Jonathan Dewitt
8,101 Points

Yes, you are correct in your understanding. Event can be many things: click, mouseover, focus, keydown, etc. Target is the element that you are listening for the event to happen on. For example, with a button element, your event would be click and the <button> would be the target.

ammarkhan
.a{fill-rule:evenodd;}techdegree
ammarkhan
Front End Web Development Techdegree Student 21,661 Points

Jonathan Dewitt so imagine i got this to understand

document.addEventListener("click" , function(event){
        console.log("The" + event + "is clicked and" + event.target + "is targeted using tagname of " + event.target.tagName);
        console.log(event.target);
})

But the first line would print 

The[object MouseEvent]is clicked and[object HTMLLIElement]is targeted using tagname of LI

but the second will be 

LI

Why first line return a object?

Jonathan Dewitt
Jonathan Dewitt
8,101 Points
Jonathan Dewitt
Jonathan Dewitt
8,101 Points

I think the result is different if you log the object alone versus being part of a string. If you want the log to be more specific, try using these:

console.log("The " + event.type + " is clicked and " + event.target.nodeName + " is targeted using tagname of " + event.target.tagName)
ammarkhan
seal-mask
.a{fill-rule:evenodd;}techdegree
ammarkhan
Front End Web Development Techdegree Student 21,661 Points
ammarkhan
.a{fill-rule:evenodd;}techdegree
ammarkhan
Front End Web Development Techdegree Student 21,661 Points

Jonathan Dewitt So in the video, when Guil do

if(event.target.tagName == ''BUTTON"){
let li = event.target.target.parentNode;
let ul = li.parentNode;
ul.removeChild(li);
}```

from what i undersand on the second line, the li get parentNode of button which is LI , and on line 3 it select the parent Node of li which is UL and on third line, it removes the child of UL from third line? So it goes up first and then down again?
Jonathan Dewitt
Jonathan Dewitt
8,101 Points
Jonathan Dewitt
Jonathan Dewitt
8,101 Points

Yes it seems you understand it correctly.