Welcome to the Treehouse Community

Want to collaborate on code errors? Have bugs you need feedback on? Looking for an extra set of eyes on your latest project? Get support with fellow developers, designers, and programmers of all backgrounds and skill levels here with the Treehouse Community! While you're at it, check out some resources Treehouse students have shared here.

Looking to learn something new?

Treehouse offers a seven day free trial for new students. Get access to thousands of hours of content and join thousands of Treehouse students and alumni in the community today.

Start your free trial

JavaScript JavaScript and the DOM (Retiring) Responding to User Interaction The Event Object

Alanis Chua
Alanis Chua
2,830 Points
Posted by Alanis Chua
Alanis Chua
2,830 Points

terms

i am confuse with all the terms.. what is event object, event, event handler, properties of event (show in MDN)? what is being passed in the 'event' as parameter?

listDiv.addEventListener('mouseover', (event) => {
  if (event.target.tagName == 'LI'){
  event.target.textContent = event.target.textContent.toUpperCase();
  }
Gustavo Winter
Gustavo Winter
Courses Plus Student 27,382 Points
Gustavo Winter
Gustavo Winter
Courses Plus Student 27,382 Points

HTML DOM events allow JavaScript to register different event handlers on elements in an HTML document.

Events are normally used in combination with functions, and the function will not be executed before the event occurs (such as when a user clicks a button).

The event handlers are a group of properties offered by DOM elements to help manage how that element reacts to events.

Let's see this terms on this function 

listDiv.addEventListener('mouseover', (event) => {
  if (event.target.tagName == 'LI'){
  event.target.textContent = event.target.textContent.toUpperCase();
  }

addEventListener() :

listDiv.addEventListener() { //here, the addEventListener() allows you to add some interactive to your DOM element, who could be a div, button, any HTML element.
  // Some function here
}

eventHandler :

listDiv.addEventListener(eventHandler, function() { // here the eventHandler allows you to choose how the function will be trigger. It could be over a click, doubleclick, mouseover, etc...
//some functio here
})

Properties of event : 

listDiv.addEventListener(eventHandler, event ()=> {
// some function here
  console.log(event); // Check the comment below 
})

event -

When i'm studying javascript the DOM, i have some difficult to understand what it is, but i solve this problem using the console.log(event); , the event will change from one div to another, so it could be a object, or one p tag, or the json provide from a button. I advise you, to use this practice, you will see the benefit.

Hope this helps. happy coding.

1 Answer

Steven Parker
Steven Parker
231,271 Points
Steven Parker
Steven Parker
231,271 Points

You were on the right track. The "event" parameter that is passed to a handler is a reference to the event object. This is the one described on the MDN page. It has quite a number of useful properties and methods.

The function that you pass to "add EventListener" is the event handler. It runs when the event occurs, and as already mentioned, is given the event object as the parameter.

Does that clear it up?