From the course: JavaScript Essential Training
Unlock the full course today
Join today to access over 23,400 courses taught by industry experts.
Advanced event listeners and "this" - JavaScript Tutorial
From the course: JavaScript Essential Training
Advanced event listeners and "this"
- [Instructor] Now that our event listener is working, we need to expand its functionality a bit. For one thing, the button text needs to be updated to reflect what the button actually does. Right now, it says open lid when the lid is closed. And when I click on it, it also says open lid when the lid is open. So it should really say close lid when the lid is open and vice versa. Secondly, we need to update the property for lid status in the object itself. So if that object was living in a database, and we want to pass that object back into the database to change the status, we can do that. This serves as a good example to highlight an important issue when choosing whether to use an arrow function or a function declaration as the event listener callback. Let me show you what I mean. In our event listener here, we are targeting the button element and then adding an event listener to it. So if I want to change the text…
Practice while you learn with exercise files
Download the files the instructor uses to teach the course. Follow along and learn by watching, listening and practicing.
Contents
-
-
-
-
-
-
-
-
-
-
-
(Locked)
DOM events explained1m 41s
-
(Locked)
Typical DOM events5m 35s
-
(Locked)
Event listeners5m 45s
-
(Locked)
Practice: Experiment with event listeners1m 32s
-
(Locked)
Advanced event listeners and "this"6m 12s
-
(Locked)
Pass arguments through event listeners4m 53s
-
(Locked)
Challenge intro: Create an event listener2m 15s
-
(Locked)
Solution: Create an event listener6m 16s
-
(Locked)
-
-