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
179,663 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?