Learning Goals
At the end of this Lesson you will be able to:
- Invoke functions with event listeners, using external function declarations.
- Invoking functions with event listeners, using internal anonymous or arrow functions.
In your javascript/exercises folder, create a new sub-folder named event-listeners.
Save the exercise file below to this new javascript/exercises/event-listeners sub-folder.
About event listeners
Event listeners are the recommended way to invoke functions within modern JavaScript code. The syntax takes two possible forms:
- External function declaration: An event listener can call a stand-alone function located anywhere in the JavaScript program.
- Internal anonymous or arrow functions: Alternatively, the code fired by the event listener can positioned inside the event listener itself.
An advantage of event listeners is that they are always located in the JavaScript code, rather than mixed in with the page content and HTML tags.
Exercise 11.1: Create an event listener with an external function to change the box background color to red
btn_1, when clicked, should change the background color of box-color-1 to red.
Exercise 11.2: Create an event listener with an internal function
btn_2, when clicked, should change the background color of box-color-2 to green.