Hello, in this jQuery video, I'm going to show you propagation. So let me just quickly implement something, add a div tag within here on the div tag and you can add as many as you want and the principle will essentially still be the same. It's going to keep it simple and have to then have an ID on yellow, and red you're pulling these certain in one style recommended a gym, don't do a lifestyle for the sake of this video. We will and I am going to do what am I going to say? I am going to put I'm going to put what background color grid How can you can get more motor duty This one, this is going to yellow. So let's see what we actually end up with before we do any JavaScript.
And I just need to put some text inside of here. So lesson learned. yellow box and a four reload. There we go, we got these two boxes, I want to go a step further. And actually, so I'm actually going to increase this so you can see this a little bit better. I'm going to go a step further and add.
I'm happy with that as it is. I'm going to have a height. The width is fine. Matt the height of the pixels. I'm going to limit the width on this one though. And you'll see again in a second or two via pixels, can either image on free value just to demonstrate practice.
And then to reload it, they've got this yellow box inside the red box. That's what I was getting. Now let's do a button check when these have been clicked in jQuery dollar. leaders do your selector which is hash, red dot. Now, I'm just gonna say I'm gonna do the exact same or get slight different because instead of being read to me a yellow button now and the yellow button, click, so let's just reload this, see what happens if I reload. Click the red button is fine.
Click the yellow button. Oh, we get so let me just restart so reload so you can demonstrate all over the yellow button. I'm going to do one single click, he says yellow button, red button clicked. But we only click the yellow button. What happens is when an event occurs, you propagate through its parent elements as well, because this is technically over this red box, this click will propagate through and go to any of the ones that that there is essentially over. Like I said, you could have multiple nested elements enough to be developments that could be images, whatever you want.
And the principle is the same. You might want this you potentially might, but you know, I'd say most of the time, this can be an annoyance, so to actually prevent it, luckily, there's a really, really simple fix for it. So for the yellow button, we just confirm that we need to, you know, manipulate the event in some capacity. And we are going to say event. We'll just do a wiki the lineup of the entity marrows at the end of the stop when does Ah, let's see, currently. let's reload it and see what we get.
If I click yellow box, only the yellow button, you know, clicked console is locked up with the red box only that is relevant. So this prevents it from bubbling up, so it restricts it to itself. There are actually a few other methods that you can use in relation to propagation. There's one for basically checking if the propagation is stopped, you know, stopping just the immediate propagation and not not all of the you know, propagation that go. I would say let's say you know, grandfather, great grandfather elements. What I'm going to do it provided link we can see all of those different functions that you can use them manipulate.
If you understand what we covered here. You're good to go as usual. If you have any questions or any doubts, any concerns, or just want to say hi Feel free to drop me a message. And as usual, thanks for watching. I look forward to seeing you in the next video.