event.target

Question

why did Gui used----------
const checkbox = event.target;
full code-----------------------------------------------
const form = document.getElementById('registrar');
const formInput = document.querySelector('input');
const ul = document.getElementById('invitedList');
form.addEventListener('submit', function(e){
  const text = formInput.value;
  const li = document.createElement('li');
  li.textContent = text;
  const label = document.createElement('label');
  label.textContent = 'confirmed';
  const checkbox = document.createElement('input');
  checkbox.type = 'checkbox';
  label.appendChild(checkbox);
  li.appendChild(label);
  ul.appendChild(li);
  formInput.value = '';
  e.preventDefault();
});
ul.addEventListener('change', function(e){
  const checkbox = event.target;
  const checked = checkbox.checked;
  const listItem = checkbox.parentNode.parentNode;
  if(checked) {
    listItem.className = 'responded';
  } else {
    listItem.className = '';
  }
});

ale8k · Accepted Answer

I recognise the code you're on, you should do the DOM course before DOM scripting by example man. But to help you here, the event object has a property called target, we can call on the event object by passing it as a parameter to a function after an eventhandler has been attached to a listener like so:
js
test.addEventListener('click', (event) => { // as you can see, where I've written event this is the event object. 
// you can actually name it whatever you like as it will always call on the event object
});

Once we've access to the event object, by following the steps above. We can use .target property. Let's assume we have some markup code and its a ul with 3 li items inside. We may call the listener/handler on the ul and then access
whatever is clicked within the listener with event.target. We may even conditionally check this like so:
```js
ul.addEventListener('click', (event) => {
      if (event.target.tagName === 'LI') { // we use caps as for some reason tagName returns the name in caps idk why
          // now what this does is checks for anything being clicked in the ul, then if what is clicked inside of ul has a tag name of LI, do the following code in here TO the li as what is it? its the event target.
      }
// finally one more way to look at it:
//what if we just out right create a variable and assign it to the event target? Let's assume we also have a h1 in our ul
  if (event.target.tagName === 'H1') {
                  const h1 = event.target;
                  // now we may call methods and props on h1 when writing whatever we are writing in here. If this block didn't include other code, I could actually declare this outside of the if code block and access it from the local function (our handler)
  }
});
```
I hope this helps understand it a little more, once it clicks though man it clicks. I promise!

Rohit Sagar · Answer

Thanks ale8k

Dave StSomeWhere · Answer

It is how you identify the child element (li) that actually triggered the event. The event listener is applied to the parent (ul) element.
Check out the MDN Event Target Documentation (https://developer.mozilla.org/en-US/docs/Web/API/Event/target) for details.

Welcome to the Treehouse Community

Looking to learn something new?

Rohit Sagar

Rohit Sagar

event.target

3 Answers

ale8k

ale8k

Rohit Sagar

Rohit Sagar

Dave StSomeWhere

Dave StSomeWhere