JavaScript JavaScript and the DOM 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 21,111 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 21,111 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?