Check out a free preview of the full Debugging and Fixing Common JavaScript Errors course
The "Questions 1" Lesson is part of the full, Debugging and Fixing Common JavaScript Errors course featured in this preview video. Here's what you'd learn in this lesson:
Todd answers questions from students about the first Challenge and how to remove extra event listeners added by frameworks.
Transcript from the "Questions 1" Lesson
[00:00:00]
>> Henry asked about how you can remove fade extra listeners added by frameworks like Angular and React?
>> Yeah.
>> In Chrome.
>> How you can remove them? So-
>> Yeah.
>> When you're looking at a particular space on a particular element, like when we were examining this text area here, and we're looking at the event listeners.
[00:00:21]
Now, there's two different check boxes up here. The first one we already talked about was Ancestors, where you can look at what are the things listening at a higher level? The second one is framework-based listeners. Now, this one 's not so much for removing all the, the purpose of this is so that you can see your code through the framework listeners.
[00:00:45]
So, a lot of frameworks will introduce intermediary levels of event listening, and so by, By turning this on, it's going to allow you to look through the code in a framework and see what parts of your code are actually executing. So for example, if I turn off Framework listeners, the only thing that's actually listening to keyup inside of this text area is tracker.js, which is a piece of our framework code.
[00:01:12]
But that's not very helpful. If you turn this off, a lot of your listeners might be jQuery or Angular or whatever. So by turning that checkbox on, it still shows the framework code that is actually attaching the event. But also showed you the actual event handler that proxied through your code.
[00:01:29]
In just about every cases, I imagine you want this turned on. Because you probably care about what bits of your code are actually listening to an event, not the intermediary framework layers. Does that answer Henry's question, I hope?
>> Patrick had a question about a solution for the first exercise.
[00:01:50]
He tried a localStorage.setItem('next-rant', text), localStorage.removeItem-
>> Here, let me go to this chat.
>> Yeah, it's kinda hard to read.
>> He created an else.
>> Yeah.
>> So it-
>> Yeah, it's an if-else statement.
>> It checks text, and if that's false-
>> Yeah, that's a totally fine solution, dude, that's fine.
[00:02:15]
I mean-
>> Why is he specific about the key? I think if he's trying-
>> Yeah, so the idea that if there wasn't a truthy value in text that you just cleared out, I would say that's a fine solution. There might be an edge case in that. I mean, if we really wanna like split hairs, there might be an edge case.
[00:02:32]
Where if you've got an invalid event for some reason, due to weird browser quirk or whatever, you might clear out a valid value with a garbage event. But I can't think of a particular case where that would happen, so it's probably fine.
Learn Straight from the Experts Who Shape the Modern Web
- In-depth Courses
- Industry Leading Experts
- Learning Paths
- Live Interactive Workshops