Event Targets

For this post, you should have an understanding of events in JavaScript.

You should also be somewhat familiar with Chrome Developer Tools. We will be using it to explore the event object.

We will be going over the event object, and the sometimes subtle differences different events have.

Event Handler Example

Let's start off with a simple "click" event.

Given this button in HTML:

<button id="like-button">Like</button>

And this JavaScript

var button = document.getElementById("like-button")

button.addEventListener("click", function(){
  console.log("You clicked the 'like' button");
});

We are able to see that we clicked the 'like' button, but that's about it.

We can see a bit more about the like button if we do this:

button.addEventListener("click", function(){
  console.log({button: button});
});

This element is actually a JavaScript object, and we can dive into it's specifics. We can drill into the properties of this element.

We can pass an argument through our event listener's callback function. We sometimes see this called e. Short for event.

button.addEventListener("click", function(e){
  console.log({button: e});
});

This event object is extremely useful. It contains all sorts of helpful data. Different events have different properties. A click event will tell you where on the window you clicked, what time the window was clicked, but most importantly, what was clicked. This is found in the target property.

In our example button = e.target. So why would we care about e.target if we already know what element we attached our event listener to?

Often times we will have a list of elements. Imagine a list of friends on Facebook, or a gallary of images.

For Example:

<div>
  <h1>Get Milk</h1>
  <button name="get-milk" id="item-1" class="remove-button">remove</button>  
</div>
<div>
  <h1>Code</h1>
  <button name="code" id="item-2" class="remove-button">remove</button>
</div>
<div>
  <h1>Pick up Becky</h1>
  <button name="pick-up-becky" id="item-3" class="remove-button">remove</button>
</div>

We would like to set one event handler for all buttons. We can do that like this:

remove = getElementsByClassName("remove-button");

remove.addEventListener("click", function(e){
  console.log({button: e});
});

Now we can get at important information about the element, and in this case, remove the specific tag if we wish.

Different elements and events have different properties. We will cover some of the important ones.

<input/> Regular input fields have a value property. This is the characters or value of whatever the user has entered.

<input type="checkbox"/> Checkboxes have a "checked" property which is a boolean.

keydown event has the keyCode and key property, which will help you determine which key the user pressed.

We will be able to get at the value of all an elements attributes. Such as name, id, style, etc.

We can also manually change any of these that we wish to using JavaScript!

var button = document.getElementById("like-button")

button.addEventListener("click", function(e){
  e.target.style.color = "black";
});

.style on the .target property contains all the different stylings known to css. You can change anything you'd like here.

When doing DOM manipulation, practice using the Chrome Developer Tools and you will learn and develop much faster.

Prevent Default

The event object has a .preventDefault() method. This is used to stop the default action of an element from happening.

For example:

• Prevent a submit button from submitting a form
• Prevent a link from following the URL

We will often times use this from preventing a form from submitting. Forms submitting refresh our page, and we usually don't want this.