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 (Retiring) Responding to User Interaction Listening for Events with addEventListener()

Jonathon Irizarry
Jonathon Irizarry
9,154 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
221,296 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,154 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
221,296 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,154 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
221,296 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,154 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!

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(); });