Check out a free preview of the full Organizing JavaScript Functionality course:
The "Task #1 - Events" Lesson is part of the full, Organizing JavaScript Functionality course featured in this preview video. Here's what you'd learn in this lesson:

Kyle beings walking through the solution to the first task. He creates a click event handler and stops the event from propagating.

Get Unlimited Access Now

Transcript from the "Task #1 - Events" Lesson

[00:00:00]
>> [MUSIC]

[00:00:03]
>> Kyle: All that was a long preamble to say. We wanna attach click handlers to these two links.
>> Kyle: And there's couple of different ways that we can do that, but the easiest is for me to say- you'll notice that there is a control a js-controls wrapper div around the two header links.

[00:00:29] So if I were to find an element by attribute, and this is the syntax you use for finding things by attribute. We put brackets in, rel=js-controls. What that means is go find any element in the page that has a rel attribute whose value is js controls. So I'm saying here go find one of those and get me-

[00:01:02]
>> Kyle: The child element, js-register.
>> Kyle: It's a question about rels having more than one element. Yeah, as you'll notice here in my HTML, I've got multiple rel attributes here. And I only care about one of them, it's the js-register. All right, so now I wanna say a child element where the rel attribute has js control or js registers somewhere in it.

[00:01:32] So that is almost the same,
>> Kyle: Except when you * = js-register, that's one way of me getting at that link. You also might note that if I make js register totally unique,then I don't even really need this part.
>> Kyle: And if I want both of these links to be attached with the same handler, which I do, I can use the compound syntax.

[00:02:08] I can do a comma here and say, rel*= js-login. So here I'm saying go get me an element that has js register as its rel attribute and another one that has js login in its rel attribute.
>> Kyle: I know in my page there's only gonna be one of each of those, so I know I now have a collection of only those two elements.

[00:02:36] There's literally a half dozen other ways that I can write that same line of code. You also should have been provided in addition to the js org, you would have gotten the js org solutions folder. And you'll notice in that js org solutions folder I have broken down tasks one, two, three, and four.

[00:02:55] Those mapped to the high level task that we're doing in our read me. So task one is the completed form of this task. Task two is the completed form of task two and so forth. So if I took a quick little cheat peek at the solution file for header.js.

[00:03:18] This is another way of doing it, which is I'm going to attach not even to the controls but to the header element itself. You notice in my index HTML, I also have an element here called js-header. And there's a thing called event bubbling, which means if I click on something and I don't have a handler on that, the bubble will make that event fire on any of its parent elements, too.

[00:03:48] So I could take advantage of attaching a click handler to the header element, and these link clicks will just bubble up for me, which is nice and convenient. So that's actually the way I'm going to prefer to do this. But like I said, there's like a dozen other ways that you could do it.

[00:04:04]
>> Speaker 2: Did you cover that? What does that star mean?
>> Kyle: Star means find it anywhere in the value, if you're gonna have multiple values.
>> Kyle: So I'm instead going to attach to the header element. I'm going to attach a click handler on click, and I want to limit my clicks to only ones that were on those js elements.

[00:04:31] So if we come back to our index HTML, I wanna limit it to js register or js login. There is a couple different ways of going about that, but the easiest way to go about that is to give it a string that says.
>> Kyle: So it just needs to be one of the things that has a js- in it.

[00:05:06]
>> Kyle: And actually I'm going to slightly switch from my solution file. I'm gonna go back to using controls rather than header here.
>> Kyle: Finally, we give it a click handler.
>> Kyle: So, what we know inside to this function is that if we get this function called, we know that one of our two links was clicked, which is what we wanted, we wanna make sure that one of our two things was clicked.

[00:05:54]
>> Kyle: Now, in terms of event management with jQuery. You've probably, if you've had any experience with jQuery before or you or you've read Stack Overflow posts, you've probably seen people do things like return false, which we don't want to do here. So there's another way of managing this event so that we handle it and it doesn't bubble anywhere do anything else.

[00:06:15] And that's to call evt.preventDefault, evt.stopPropagation, and evt.stopImmediatePropagation.
>> Kyle: So that just simply means that we're handling the event, we don't want it to bubble anywhere else, we're gonna take care of it.