FAQ: DOM Events with JavaScript - Event Object Properties

This community-built FAQ covers the “Event Object Properties” exercise from the lesson “DOM Events with JavaScript”.

Paths and Courses
This exercise can be found in the following Codecademy content:

Web Development

FAQs on the exercise Event Object Properties

There are currently no frequently asked questions associated with this exercise – that’s where you come in! You can contribute to this section by offering your own questions, answers, or clarifications on this exercise. Ask or answer a question by clicking reply (reply) below.

If you’ve had an “aha” moment about the concepts, formatting, syntax, or anything else with this exercise, consider sharing those insights! Teaching others and answering their questions is one of the best ways to learn and stay sharp.

Join the Discussion. Help a fellow learner on their journey.

Ask or answer a question about this exercise by clicking reply (reply) below!

Agree with a comment or answer? Like (like) to up-vote the contribution!

Need broader help or resources? Head here.

Looking for motivation to keep learning? Join our wider discussions.

Learn more about how to use this guide.

Found a bug? Report it!

Have a question about your account or billing? Reach out to our customer support team!

None of the above? Find out where to ask other questions here!

// Write your code below
let sharePhoto = function(event) {
event.target.style.display = ‘none’;
text.innerHTML = 'You share the puppy in ’

  • event.timeStamp + ’ ms.’;
    }

share.onclick = sharePhoto;

Confused about how this function works - why don’t you have to pass a parameter into sharePhoto even though we created one in the function?

2 Likes

In JavaScript , whether using traditional event handlers, or DOM events , event handlers are attached to their relevant object as a reference to the function. In standards compliant browsers, when the event fires, the function is executed as a method of the object, and passed a single parameter ; the event object.

You may execute the function like this, where this refers to the object in reference, which is the element, not the event.

let sharePhoto = function() {
this.style.display = ‘none’
text.innerHTML = event.timeStamp;
}

share.addEventListener(‘click’, sharePhoto)

or, you can execute the function as such, including the implicit element in the event handler

let sharePhoto = function(event) {
event.target.style.display = ‘none’
text.innerHTML = event.timeStamp;
}

share.addEventListener(‘click’, sharePhoto)

I dont really understand what happened.
It says I did all correctly, but I dont see the text of miliseconds.

1 Like

Same issue. I don’t see the difference.

I don’t understand the logic of this exercise ? I finish it but can not understand it at all.
First i see there is 3 variables. And one function with a parameter. When we call the function we not pass any parameters inside…

Inner HTML change the text in text variable.
What is the purpose of event.target ?

4.5 months, there is still no display of the timeStamp ?

I see a lot of questions on here and although I am no expert in JS I think I understand what is going on here. One of the questions we see is that we are passing in this function sharePhoto() with no argument/parameter. When we give a function to an event handler (in this case our click event handeler) we can’t conventionally provide it a function with arguments. That is to say that we can’t do something like this:
share.onclick = someRandomFunction(param1, param2);
What this does is it will call the function someRandomFunction() and then assign share.onclick to the value of whatever someRandomFunction returns. This is because when we add the () after the name of the function we are infact invoking a call to that function. There are ways around this to pass arguments to an event function but for the purposes of this exercise we need to know that we can’t conventionally pass in arguments like that. We can only assign the onclick function to our function like this:
share.onclick = sharePhoto; //notice no () which means we are assigning onclick to the function and not the value the function returns.
However when we do this method we actually do get one argument passed implicitly which is the event object. When we define:
let sharePhoto = function(event){}
We are taking into account that the onclick will implicitly give our sharePhoto function an event as an argument. Like I stated above we can’t use normal arguments so it’s safe for the computer to automatically pass it an event object and it won’t interfere with any other parameters because there can’t be any arguments.
We can then use that event parameter in our function assuming it has been implicitly passed by our event handeler and extract the properties from it. In our case we want the target which is the HTML element that triggered the event to happen (in this case the share button), and the timestamp which will be the time we clicked on the button. To access these properties we can simply use the “.” operator and the event object like so:
event.target.style.display = “none”; //gets the HTML element from event via target
text.innerHTML = event.timeStamp; //which will get the time from the event.

TLDR:
We provide the parameter in the sharePhoto() function because eventHandelers will implicitly(automatically) pass the event object when called. So that’s why we only write:
share.onclick = sharePhoto;
Instead of:
share.onclick = sharePhoto(event);

1 Like