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

Roman Brandt
Roman Brandt
806 Points
Posted by Roman Brandt
Roman Brandt
806 Points

ES6

Why do you use old way for loop? If you use new ES6 syntax can you write all code in ES6! Array.from or spread with HTML Collection! And what is it window.setTimeout? )))

3 Answers

Steven Parker
Steven Parker
182,615 Points
Steven Parker
Steven Parker
182,615 Points

For the most part, the new syntax adds to the total toolkit available to the programmer, and does not replace what's already there. This is probably most true of loops, which continue to be some of the most-used language features.

Also, you'll often find that when the instruction is focusing on a specific technique, the examples will be implemented with the intention of clarity taking precedence over efficiency. You can, of course, apply your full skill set when creating your own programs to be as efficient as possible.

And finally, window.setTimeout sets a timer which executes a function or specified piece of code once after the timer expires. For more details see the MDN page.

Happy coding! :christmas_tree: And for some holiday-season fun and extra practice, give Advent of Code a try! :santa:

Roman Brandt
Roman Brandt
806 Points
Roman Brandt
Roman Brandt
806 Points

Ok but setTimeout already knows where he came from )) why we use window object? If I write a part like that and a part in a new style, it confuses a little. I'm a junior web developer and I have a lot of questions )))

Steven Parker
Steven Parker
182,615 Points
Steven Parker
Steven Parker
182,615 Points

I guess I misunderstood your question. You meant why is it called that, and it is because it is the full name for it. But you can leave off the "window." part since it is also a reference to the global object.

thomas shellberg
thomas shellberg
11,355 Points
thomas shellberg
thomas shellberg
11,355 Points

I used the 'forEach' method instead of an oldschool for loop. It's easier for me and you can practice passing functions as arguments. In this example I highlight the currently "focused" input elements and revert the highlighting when the element is not focused(you hit tab to a different input or click out of it).

let allInputs = document.querySelectorAll('input');

allInputs.forEach( input => {
  input.addEventListener('focus', () => {
    input.style.borderColor = "lightgreen";
});

input.addEventListener('blur', () => {
    input.style.borderColor = "lightgray";
});
});
Steven Parker
Steven Parker
182,615 Points
Steven Parker
Steven Parker
182,615 Points

Be aware that "forEach" is not a suitable replacement for a loop in all cases. One notable difference is that is has no mechanism for early termination (like "break" in a loop).

And if you find you are doing any repeating process to set up multiple event listeners, it's likely that a much better approach to the issue is with a single delegated handler:

// handle ALL inputs
document.addEventListener('focus', e => {
  e.target.style.borderColor = "lightgreen";
}, true);

document.addEventListener('blur', e => {
  e.target.style.borderColor = "lightgray";
}, true);
thomas shellberg
thomas shellberg
11,355 Points
thomas shellberg
thomas shellberg
11,355 Points

Thanks for the response, Steven, and thanks for that snippet! Much nicer. :)