Can I have an explanation for this paragraph…, I don’t quite understand what the “event object” does
Hello @albaraa_1949
there something called class which act as blueprint which describe the property and activity that an object of that class has
for example
class person{
string name;
date birthday;
function calcualteage(){
}
}
name birthday are the property or field data and calcualteage are the activity that person has (please ignore the syntax here )
person user1;
suppose this user has name albaraa and birthday 1/1/2021
user1 is an object of the class person and it’s name is albaraa and birthday would be 1/1/2021
do not worry there lesson for that
now for event object is an object of the event which has some property like the target for example when you click a button and event object created and it’s taget would be that button which would has some other option like it style and color and the text writen on it and so on
many time you have some button that share their action so you would create one function to handle them all but to know when one is being trigered you use the e / eve /event to handle it
hope that help and have a nice day 
1 Like
@justsomeone I just see you beat me to it, while I was writing my answer. 
I will still post it below. Maybe it gives some additional insight.
The event object contains additional information about the event. It is automatically passed to the function that handles the event. Let’s have a closer look at the example from the paragraph:
function bgChange(e) {
const rndCol = 'rgb(' + random(255) + ',' + random(255) + ',' + random(255) + ')';
e.target.style.backgroundColor = rndCol;
console.log(e);
}
btn.addEventListener('click', bgChange);
Live example: https://mdn.github.io/learning-area/javascript/building-blocks/events/random-color-eventobject.html
Although we didn’t include any arguments in the bgChange function on the last line, we can still use that additional information in our function. We just have to give it a (argument) name in our function definition (line 1). In this case the letter “e” was used, but it can be anything you like. The browser knows that it has to put this additional information (the event object) into the “e” argument.
Now the question is: “How does this help me?”. “Glad you asked!” 
In the example above we want to change the background color of the button which was pressed. Our bgChange function itself has no idea, who called it. So how should it know, which element needs a new background? There’s where the event object comes into play. The event object contains A LOT of information about the event. For example it knows who sent the event (target) or the position of the mouse when the click happened (clientX and clientY). If you go to the live example and open the console (F12), you will see the complete event object being logged, when the button is clicked.
As we are interested in who called the function we simply use the target property of the event object. It contains the <button> element. By writing e.target.style.backgroundColor = rndCol; we set the background color of e.target (our button) to a new color. If a second button would call the same bgChange function, it’s own color would change, leaving the first button as it is.
Phew! This response became longer than I thought. 
I hope I could clear things up for you. If you have any more specific questions, I’m happy to help you.
Have a nice day!
Michael
@mikoMK, @justsomeone I am grateful to you both, thank you very much.
1 Like
it was awesome response well done man it even better than mine
how dare you loooooool
have a nice day both of you guys @mikoMK @albaraa_1949
1 Like
Thanks! You, too.
You’re a great guy, @justsomeone 
you very welcome and thanks a lot and you awesome