Welcome to the Treehouse Community

The Treehouse Community is a meeting place for developers, designers, and programmers of all backgrounds and skill levels to get support. Collaborate here on code errors or bugs that you need feedback on, or asking for an extra set of eyes on your latest project. Join thousands of Treehouse students and alumni in the community today. (Note: Only Treehouse students can comment or ask questions, but non-students are welcome to browse our conversations.)

Looking to learn something new?

Treehouse offers a seven day free trial for new students. Get access to thousands of hours of content and a supportive community. Start your free trial today.

JavaScript JavaScript and the DOM Responding to User Interaction The Event Object

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
Pro 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
208,478 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?