JavaScript JavaScript and the DOM Responding to User Interaction The Event Object

Ewerton Luna
Ewerton Luna
Full Stack JavaScript Techdegree Student 14,692 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

<noob />
<noob />
17,032 Points

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
Ewerton Luna
Full Stack JavaScript Techdegree Student 14,692 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?