span Bodingles | Colt Steele

The Web Developer Bootcamp 2024

Colt Steele

Back to JavaScript Index Page

JavaScript Event Objects
Events Objects

W3Schools Event Objects
Codeguage Event Objects

What are Event Objects?

As we learned from the JavaScript Events lesson, when an event occurs on a given target, its corresponding registered handler function, if there is any, is invoked with a single argument of type object.

This argument is referred to as an event object.

For example, when we define a click event, it might look something like this:

  • target.addEventListener('click', clickHandler);
The clickHandler is a callback function that could also be written like:
  • clickHandler();
Residing inside the parenthesis of this callback function clickHandler is the hidden event object.

So to restate it:

  • Definition:
    • An event object refers to the argument sent into an event handler function.

An event object simply represents an event. It contains contextual information regarding the event that caused a given handler to be invoked.

This can include things like the time at which the event occurred, or maybe the name of the event (such as 'click'), or maybe the target on which the event occurred, and so on and so forth.

In the case of event-handling properties and the addEventListener() method, since we define a function ourselves to act as an event's handler, we could name the parameter any way we like and then use it inside the function.

Conventional names are e, event, or even evt, following the fact that the parameter represents an event. It's almost always good to stick to conventions.

Here are a few examples:

  • JavaScript
    • // Assume target is already defined.
    •  
    • target.onclick = function(e) {
      • // The event object is: e
    • }
    •  
    • target.addEventListener('click', function(event) {
      • // The event object is: event
    • });
    •  
    • function clickHandler(nameItAsYouLike) {
      • // The event object is: nameItAsYouLike
    • };
    •  
    • target.addEventListener('click', clickHandler);
      • // The event object is not listed, but it is there



Getting Event Object Properties

Now that we know what event objects are, how can we see the properties for an event object?

Let's start by creating a button:

  • <button>Click Here</button>
     

Now we need to create a JavaScript object. We will also assign a click event that will console.log the event object, when the button is clicked.

  • const button = document.QuerySelector('button');
    • // create the button object
  • button.addEventListener('click', function(evt) {
    • // assigns a click event to the button object, and assigns the variable (evt) to the callback function, which represents the event object
  •  
    • console.log(evt);
      • // outputs the event object variable (evt) to the console, so we can view it's properties
  • })
You will notice that we have actually assigned the event object to the variable evt.

And when you click the button, the console will log the event object properties, (evt), which you can then expand, to see ALL of the properties, for this event object (evt).

Remember that we did NOT create the event object. It was created, by JavaScript, when we created the object click event. All we did, was to assign the event object to a variable (evt), so that we could view it's properties in the console.

To Summarize:

  • 1). create the object
  • 2). create an event and assign it to the object
  • 3). JavaScript will create the event object and assign it to the callback function



Using Events Object Properties

Why would we need to know any of these event object properties?

Well, if you look at some of these properties, you see entries such as, clientx, and clienty. These show the exact position on the page where the mouse was actually clicked. This could be useful if you were for example, writing a program, where if you click on a certain portion of the page you want a popup or some other form of page interaction.

Another reason is that often, we need to rely on event objects when we are working with keyboard events. Because frequently we want to know what key was pressed, and that information is located in the keyboard event object..

For example, let's us a regular form input to display key inputs. First (in HTML) create the form element:

  • <input type="text">
    

and now the JavaScript:

  • const input = document.querySelector('input');
  • input.addEventListener('keydown', function(event) {
    • console.log(event);
  • })

Now we've done several things here,

  • - We created a form input object called input
  • - We assigned a keyboard event ("keydown") to our form input object (input)
  • - We assigned a variable event to the event object
  • - and finally, we output the properties of the event object, (event), to the console, when the event is activated (by a keydown press)
And if we review our output in the console log we find:
  • key: "f"
or which ever key was pressed, (among othr properties in the log).

Also, interestingly enough, you could create a "global" scope and not be tied to an element such as a vutton or form element, by using the "window" as the object for the event.

If we write:

  • window.addEventListener('keydown', function (e) {
    • console.log(e.code);
  • })
we are now targeting window, which targets the page window as the object, and keydown becomes the event.

We then console.log the event object (e) and it's property code, which is the key code for the key being pressed.

*note: "code" is but one of several keyboard event properties that can be accessed. Here is more information.

So we can now press a key anywhere on the page and the code will track which key was pressed.

Back to Top