Events & Listeners

[00:00:00]
>> Brian Holt: So now, we're gonna do some events. This is gonna make your pages interactive, right? That's one of the big points of using JavaScript in the browser is you wanna make things respond to people doing things. So I'm about to show you the most annoying JavaScript feature in the entire world.

[00:00:21]
It's called alert. So if you do click me right there, hate it. It's the laziest programming, right? Alert is only for debugging purposes. If any of you ship websites with alert in it, I'm gonna find you.
>> [LAUGH]
>> Brian Holt: It's the worst, right?
>> Brian Holt: Okay, so in fact, yeah, let's refresh the page here.

[00:00:58]
>> Brian Holt: So if you start like typing and retyping, it's gonna to add event listeners multiple times. So you can actually listen to the same event multiple times. Every time I type in this, it reruns all of the scripts. So that's why it keeps adding itself. So okay, event button Click me, right?

[00:01:13]
So this is just a normal button right here. Here I'm grabbing the button, document.querySelector.event-button, right? Follow me so far. Button.addEventListener. And basically we're saying, whenever this event happens and in this case, click event happens run this code. This is called a callback, right? You call it back whenever something happens.

[00:01:38]
So whenever this happens, I'm saying, hey, alert, hey there. So whenever I Click me, it runs that code.
>> Brian Holt: Makes sense? So click is obviously one of the more common ones. It doesn't have to be done necessarily on buttons though, I'm going to implore you= if you're going to put an event listener, it probably should be on a button.

[00:01:59]
>> Speaker 2: If you're going to make a drop-down menu, would you use a click event for the button?
>> Brian Holt: So there are built in drop-downs in the browser already, you can called selects, right?
>> Brian Holt: Like this and then you can use styles to make this look however you want to.

[00:02:32]
So I would say in general, this is better.
>> Speaker 2: You could make a navigation bar with that all sorted now?
>> Brian Holt: That's always good, absolutely. The reason why I would say stick to this rather, you absolutely can do that with just like divs and JavaScript and CSS and stuff like that.

[00:02:45]
The reason why this is better is this is way more accessible to someone that's visiting your site using a screen reader or it's also more accessible to Google when they're doing their SEO kind of stuff. So I'm huge on accessibility, right? The internet's for everyone, right? So we shouldn't make websites that people can't use.

[00:03:05]
So that's why I say use buttons when you're doing click events, because screen readers know how to handle buttons, right? They're built to use the internet as people would expect it. But if I put like, I made this like a div, right, this is no longer first of all, no longer has the style of a button.

[00:03:24]
This still works. It would still work, if I just got to run this again in the browser here. So now if I do this in the click, right, it does still work, right? So I can add event listeners on things that aren't buttons, but a screen reader is gonna have no idea what to do with this, right?

[00:03:45]
It doesn't know that there's an event listener on this. It wouldn't know to show that to a person that was using a screen reader. So I'm going to say that, that's not ethical, right? It's not ethical, because we should be, again, making websites that everyone can access. Yeah.

[00:04:00]
>> Speaker 2: On ethical things, could you create alerts that are hidden?
>> Brian Holt: Not using this kind of alert, right, this kind of alert is gonna pop over everything, right, and you have no control over what it looks like or how it does that. But there are ways to do modals and various different ways that are more shady.

[00:04:20]
I'm not gonna teach you that.
>> [LAUGH]
>> Brian Holt: Yeah.
>> Speaker 3: So for accessibility reasons, if you were writing a paragraph and you wanted to put a tag in there to bring them to another page, would it be better to use a button tag?
>> Brian Holt: No, so in that case, an anchor tag is gonna be much better anchor being in a tag, right?

[00:04:39]
So screen readers are also very, very good at finding anchor tags and to take people various places. In fact, if I wanted to, I could say, document.location here = google. Let's put in frontendmasters.com.
>> Brian Holt: So now if I click on this, let's just open that again.
>> Brian Holt: Fine, whatever.

[00:05:19]
>> Brian Holt: Let button two, button two, okay?
>> Brian Holt: Okay, so now if I come in here and I click on this, it should take me to frontendmasters.com which it did. You should always use an anchor tag for that. Because again, screen readers don't know how to handle buttons in terms of click events, but they don't know that, that's gonna be a link and it's gonna take someone somewhere, right?

[00:05:54]
Furthermore, for just everyone, I use Cmd-click all the time to open things in a separate tab and that doesn't work if I do redirection this way, right? So if you're linking somewhere that should go to a different page, it should be an anchor tag. Did I answer your question?

[00:06:12]
>> Speaker 3: Yes.
>> Brian Holt: Cool, so I've shown you click event. Click events are gonna be something that often that you're going to respond to hopefully on buttons. I'm not gonna get too much into like how to do it without buttons. You can still make it accessible without a button using things like that are called like rolls and RTA tags.

[00:06:34]
It is possible. So sometimes you have to do it that way, but just make sure that you're keeping an eye on making sure that it works with the screen and stuff like that. If you're a professional web developer, you should have a screen reader installed on your computer and you should check your site with it.

[00:06:49]
And like I was alluding to earlier, if you make your site accessible, you make it SCL friendly as well. So you get the added advantage that you'll rise in Google ranks, as well.
>> Speaker 2: Does that work with just the built in screen readers too for Firefox and stuff or should you get a specific one?

[00:07:06]
>> Brian Holt: The one I use is Jaws, I think that's the one that everyone uses. By no means an expert, but I at least try and check, right?
>> Speaker 2: I was just wondering if there was like any problem that wouldn't show up if you use the in browser screen reader versus the-

[00:07:24]
>> Brian Holt: That seems like it should work to me. I mean, people over at Mozilla are pretty smart or Google or whatever. So it doesn't offend me, I'll put it that way. [LAUGH]