The method addEventListener() is a function that takes a function as an argument.
You can use addEventListener() to listen for events. addEventListener() takes an event type and a callback function.

target.addEventListener( eventType, eventHandler );

Example with empty function:

button.addEventListener('click', ()=>{} );

target

The event target object is a sort of catchall, because an event target can be an element, a document, or window object.

eventType

There are many event types in JavaScript.

• Mouse Events – click , dblclick, mousedown, mouseup, mousemove, mouseover, mouseout, etc.
• Phone Events – touchstart, touchmove, touchend, etc.
• Keyboard Events – keydown, keyup, keypress, etc.
• Automatic Events – load, etc.

eventHandler

Can be a callback function that is often called an event handler, because its purpose is to handle events.

When addEventListener() runs, it registers a handler on the event target. The event handler that is called when clicking the target is called a click handler.

Example – Capitalizing list items on hover:

const listItems = document.getElementsByTagName('li');

for (let i = 0; i < listItems.length; i += 1) {
  listItems[i].addEventListener('mouseover', () => {
    listItems[i].textContent = listItems[i].textContent.toUpperCase();
  });
}

---

Event Bubbling & Delegation

In the previous example, we wrote code to loop through other list items and attach individual handlers to each item. But if you add a new item to the list, and click it, it won’t be processed by the event handler.

With bubbling we could just do this once on an ancestor of these list items – that is unlikely to be removed – and all events would still be caught and handled as they bubble up.

Setting a listener for an event you want to handle on a parent of your target element is called event delegation. A parent experiences the same event a child does because of event bubbling.

const listDiv = document.querySelector('.list');
const listItems = document.getElementsByTagName('li');

listDiv.addEventListener('mouseover', () => {
  listItems[i].textContent = listItems[i].textContent.toUpperCase();
});

But how would the listDiv know which listItem has been clicked?
Enter Event Object!

---

The Event Object

This object has some useful information about the event as well as a few methods we can use to help us handle the event inside the handler.

EventTarget.addEventListener('click', (event) => {
  // event is an object with info & methods
});

Example – this program logs into the console any element that has been clicked by the user, using the information acquired by through the event object event.

document.addEventListener('click', (event) => {
  console.log(event.target)
});

Fixing our previous event bubbling and delegation example

const listDiv = document.querySelector('.list');
const listItems = document.getElementsByTagName('li');

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

The if statement ensures that the code will only run for list elements inside the listDiv parent.