Welcome to the Treehouse Community

The Treehouse Community is a meeting place for developers, designers, and programmers of all backgrounds and skill levels to get support. Collaborate here on code errors or bugs that you need feedback on, or asking for an extra set of eyes on your latest project. Join thousands of Treehouse students and alumni in the community today. (Note: Only Treehouse students can comment or ask questions, but non-students are welcome to browse our conversations.)

Looking to learn something new?

Treehouse offers a seven day free trial for new students. Get access to thousands of hours of content and a supportive community. Start your free trial today.

JavaScript JavaScript and the DOM (Retiring) Responding to User Interaction The Event Object

Ewerton Luna
seal-mask
.a{fill-rule:evenodd;}techdegree seal-36
Ewerton Luna
Full Stack JavaScript Techdegree Graduate 24,031 Points

Can someone clarify this concepts about the event object for me please?

In the video, Guil says "when a handler is called, it receives the event object as its first argument".

If this is true, I guess you could just do this:

document.addEventListener('click', () => {
    console.log(event.target);
});

So, it seems to me that the event object is a global object, as in it is a property of the window object. Is it correct?

Also, does this work like Python's "self", meaning, the event object is passed implicitly as a first argument to all handlers?

Would be nice a clearer explanation than Guil's one. He's an awesome teacher, but I couldn't quite fully understand this concept.

1 Answer

the event object is used to get a reference to which element of the page u clicked. Like in ur example, if u run this line ull see that evreytime u click on element u will get the element on the console.

Lets say i have a button on i want to execute a simple alert box when i click on it

//im checking if the object i clicked on is a Button with the tagName properfty
if(e.target.tagName === "BUTTON") {
  //if it is a button then i alert
  alert("This is a button");
}
//if the object we clicked on is not a Button element
else { 
  ///we alert this is not a button
  alert("this is not a button");

}
Ewerton Luna
seal-mask
.a{fill-rule:evenodd;}techdegree seal-36
Ewerton Luna
Full Stack JavaScript Techdegree Graduate 24,031 Points

Thank you for your answer, bot net! I really appreciate it I think I got that part. What is not very clear to me so far is about the other questions. Do you know if event is a global object? Is it a property of the window object? Does it keep changing it's value for all sorts of events, like scrolling, double clicking, etc?