JavaScript JavaScript and the DOM Responding to User Interaction Listening for Events with addEventListener()

Jonathon Irizarry
Jonathon Irizarry
9,153 Points

How would you solve the problem at the end of this video without using bubbling?

In the previous videos, we created a new list item with the use of the createElement method, and it is a dynamically created element that is only created after the clickEventHandler is triggered. So my question is how do you even add a dynamically created element to another eventHandler to solve the problem remaining at the end of this video? Is it just as simple of a solution as bubbling?

3 Answers

Steven Parker
Steven Parker
186,966 Points

A big value of a delegated handler is that it takes care of elements created later.

The alternative would be to add a handler to each element as it is created. This takes a bit more code but it also uses more memory as each element has a separate handler.

Jonathon Irizarry
Jonathon Irizarry
9,153 Points

So I would need to place another callback function inside of the same callback function that is creating those new elements? Is this the correct way to add it to my code:

addItemButton.addEventListener('click', () => {
    let ul = document.getElementsByTagName('ul')[0];
    let li = document.createElement('li');
    li.textContent = addItemInput.value;
    ul.appendChild(li);
    li.addEventListener('mouseover', () => {
      li.textContent = li.textContent.toUpperCase();
    });
    li.addEventListener('mouseout', () => {
      li.textContent = li.textContent.toLowerCase();
    });
    addItemInput.value = '';
});
Steven Parker
Steven Parker
186,966 Points

Without seeing in context, this does look like it would work and attach two listeners to each new element created.

Did you test it?

Jonathon Irizarry
Jonathon Irizarry
9,153 Points

Yea it worked, but the code for some reason feels very compact almost like I'm trying to shove ten people into a small car . . . is this the only way to add a handler to the dynamically created elements without relying on delegated handlers?

Steven Parker
Steven Parker
186,966 Points

In programming "compact" is good, as long as the intention is clear upon reading as it is here. Good job. :+1:

But I'm still not sure why you want to avoid "relying on delegated handlers", since that would certainly be a good approach for this situation (it might be a "best practice" and it would certainly be my preference).

Jonathon Irizarry
Jonathon Irizarry
9,153 Points

I guess you could say it was curiosity, for some reason I like to learn the origins of everything, and I love learning about random facts in computer science even if they hold little to no value or have been deprecated.I always see you answering everyone's question with really great information. Thanks for the help!

MoatazBellah Ghobashy
MoatazBellah Ghobashy
9,357 Points

we can also build a function that contain the mouseover and mouseout events and call it in addItemButton.addEventListener

like this :

function hoverOver() { for (let i = 0; i < listItem.length; i++) { listItem[i].addEventListener('mouseover', () => { listItem[i].textContent = listItem[i].textContent.toUpperCase(); }); listItem[i].addEventListener('mouseout', () => { listItem[i].textContent = listItem[i].textContent.toLowerCase(); }); } }

hoverOver();

addItemButton.addEventListener('click', () => { let ul = document.getElementsByTagName('ul')[0]; let li = document.createElement('li'); li.textContent = addItemInput.value; ul.appendChild(li); addItemInput.value = ''; listItem = document.querySelectorAll('li'); hoverOver(); });