Welcome to the Treehouse Community

Want to collaborate on code errors? Have bugs you need feedback on? Looking for an extra set of eyes on your latest project? Get support with fellow developers, designers, and programmers of all backgrounds and skill levels here with the Treehouse Community! While you're at it, check out some resources Treehouse students have shared here.

Looking to learn something new?

Treehouse offers a seven day free trial for new students. Get access to thousands of hours of content and join thousands of Treehouse students and alumni in the community today.

Start your free trial

JavaScript

Posted by karan Badhwar
.a{fill-rule:evenodd;}techdegree seal-36
karan Badhwar
Web Development Techdegree Graduate 18,135 Points

Events in for loop

I just completed my project 7 but in the project I had to go over few NodeLists and attach an event listener with them, but my question is how that happens as in the Event Listeners are created when the page loads, but how they are triggered, they are in the scope of a for loop and every time an event happened the loop will has to go over the desired Event Handler gets fire up?

2 Answers

Blake Larson
Blake Larson
13,014 Points
Blake Larson
Blake Larson
13,014 Points

The eventListeners are set on the element itself. If you run your project with chrome tools and open the elements tab, and inspect one of the elements that you set a listener to you can see the listener types attached to it.

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <div>
        <button class="btn">1</button>
        <button class="btn">2</button>
        <button class="btn">3</button>
        <button class="btn">4</button>
        <button class="btn">5</button>
        <button class="btn">6</button>
        <button class="btn">7</button>
    </div>
    <script src="app.js"></script>
</body>
</html>

const btns = document.querySelectorAll('.btn');

btns.forEach((b, i) => b.addEventListener('click', () => console.log(`clicked button #${i + 1}`)));

Running something like this and inspecting one of the button elements in chrome tools. The event listener tabs look like this.

click
   button.btn
      useCapture: false
      passive: false
      once: false
      >handler: () => console.log('clicked button #${i + 1}`)

That click event is on all the button elements but not the parent div.

karan Badhwar
.a{fill-rule:evenodd;}techdegree seal-36
karan Badhwar
Web Development Techdegree Graduate 18,135 Points

Correct me if I get it wrong, so what I get is the loop helped us to attach the events only its not like the events are under the loop's scope right?

karan Badhwar
.a{fill-rule:evenodd;}techdegree seal-36
karan Badhwar
Web Development Techdegree Graduate 18,135 Points

And I tried in the Inspector Tools to check for the Event that I created via Loop but it's not showing over there, even though the event is working

Blake Larson
Blake Larson
13,014 Points

Are you using chrome dev tools or are you running it in a workspace? I'm not sure if you can inspect the elements the same way there.

karan Badhwar
.a{fill-rule:evenodd;}techdegree seal-36
karan Badhwar
Web Development Techdegree Graduate 18,135 Points

Blake Larson, I am looking at the same thing I can only see one event i.e submit, I am not able to see any other events sir

karan Badhwar
seal-mask
.a{fill-rule:evenodd;}techdegree seal-36
karan Badhwar
Web Development Techdegree Graduate 18,135 Points
karan Badhwar
.a{fill-rule:evenodd;}techdegree seal-36
karan Badhwar
Web Development Techdegree Graduate 18,135 Points

Blake Larson I am using Chrome Dev Tools

Blake Larson
Blake Larson
13,014 Points

So if you inspect an element (click on the element in dev tools) that has an event listener, you then can look for the Event Listener tab in the other console window. The tabs will look like this.

Styles   Computed   Layout   Event Listeners   DOM Breakpoints   Properties Accessibility