JavaScript JavaScript and the DOM Making Changes to the DOM Styling Elements

Roald Jurrian Kamman
Roald Jurrian Kamman
9,890 Points

The "() =>" part of EventListener was never explained.

Whenever Guil uses this EventListener technique I simply don't understand what's happening. Unlike for loops where you have to use: "var > list.length, += 1" etc. I get what's going on there because it was explained but I don't know what's happening and why we use this markup: "() =>"

I just get confused every time I see it.

1 Answer

Steven Parker
Steven Parker
182,438 Points

That's the "arrow function" syntax. It's covered in both of the ES2015 courses and also has it's own workshop Introducing Arrow Function Syntax.

But you can also use the classic "function ()" syntax instead.

Roald Jurrian Kamman
Roald Jurrian Kamman
9,890 Points

Thank you, Steven. I didn't go through that route. I only got here because Javascript and the DOM was a requirement for the next course in my FEWD program.

To be clear, this: button.addEventListener('click', function() { p.innerHTML = input.value + ':'; });

Is the same as: button.addEventListener('click', () => { p.innerHTML = input.value + ':'; });

Interesting to define an empty function within addEventListener. I understand it a little better after some google-fu.

How common is a function that's written this way? var.addRandomFunction('trigger', function() { code = 'do this stuff'; });

The last part of this is also confusing: "});".

But I understand it enough now to not be completely confused whenever I see it, thanks. I'm sure I will go over this again during the rest of the Javascript training in FEWD and if not I will take note to review this again.

Steven Parker
Steven Parker
182,438 Points

In that "`});" at the end, the "}" is the closing brace of the anonymous (unnamed) function, the ")" is the closing parenthesis of the "addRandomFunction" call, and ";" is the normal end of any JavaScript statement.