WHY EVENT IS USED AS A PARAMETER IN THIS

Question

var modal = document.querySelector(".modal"); var trigger = document.querySelector(".trigger"); var closeButton = document.querySelector(".close-button"); function toggleModal() { modal.classList.toggle("show-modal"); } function windowOnClick(event) { if (event.target === modal) { toggleModal(); } } trigger.addEventListener("click", toggleModal); closeButton.addEventListener("click", toggleModal); window.addEventListener("click", windowOnClick);

Answer 1

1. It is just a name, it doesn't have to be named "event", some people like to name it as "evt".
2. The parameter event does not need assignment because it is generated when the click event is listened.
3. event is an object with several properties, for example, target. which is called in your example code as event.target
Another commonly used properties are mouseX and mouseY
4. This helps us to provide different results to user under situations.
Find some games from trending/hot today and you will see how mouseX and mouseY is used in calculations.
Take this code as example,
(i) the parameter event in line 15 is because of the click event listener in line 11.
(ii) check the values of event.clientX and event.clientY in console log each time you click the screen, and also how I used these values to update the position of my (old) logo.
https://code.sololearn.com/WDymn82FAiHB/?ref=app