Can someone explain for me what the event object is?

You are right in thinking about the event object like a variable. It is a global object that contains a list of properties and methods that you can use when manipulating the DOM with JavaScript. A good way to get some practice and strengthen your understanding of it is to play around with it in the console by checking out it's properties. Knowing this can really help you out in the future when using the event object.

An event handler is usually another name for a function that "handles" the event occured. In your code example, the ES6 Arrow function is the event handler. You can pass in the event object as the argument for this function to allow you to exploit the event object further.

For example, you can use the target property of the event object to see exactly which element triggered the event by logging it to the console:

listItem.addEventListener('click', (event) => {
  console.log(event.target);
  listItem.style.backgroundColor = "red";
});

// same as above, just using older syntax for the event handler function
listItem.addEventListener('click', function (event) {
  console.log(event.target);
  listItem.style.backgroundColor = 'red';
});