1 00:00:00,610 --> 00:00:05,570 All right guys so we looked at event listeners the event object most and key events. 2 00:00:05,590 --> 00:00:06,640 Now I want to discuss. 3 00:00:06,640 --> 00:00:09,490 Event bubbling and event delegation. 4 00:00:09,640 --> 00:00:14,240 So even bubbling is the bubbling up of events through the dorm. 5 00:00:14,290 --> 00:00:19,720 So when an event happens on a particular element in the dorm and actually will bubble up through its 6 00:00:19,720 --> 00:00:20,210 parent. 7 00:00:20,210 --> 00:00:27,360 So for instance if we were to put let's say a click event on this span right here this card title. 8 00:00:27,520 --> 00:00:31,030 Now that event is actually going to bubble up to its parent. 9 00:00:31,030 --> 00:00:34,950 Its going to go to the card content then its going to go up to Maine. 10 00:00:35,040 --> 00:00:38,500 It's going to go up to this div and so on it's going to bubble up. 11 00:00:38,580 --> 00:00:38,980 All right. 12 00:00:38,980 --> 00:00:43,860 Now event delegation is almost the opposite of event bubbling. 13 00:00:43,900 --> 00:00:50,290 It's where we put the listener on one of the parent elements and then we use logic inside of the event 14 00:00:50,290 --> 00:00:56,730 handler to target the element that we actually want that click for whatever type of event it is. 15 00:00:56,740 --> 00:01:02,230 So it could be any parent for example what I'm going to do what I'm going to give you as an example 16 00:01:02,230 --> 00:01:04,360 is use these list items here. 17 00:01:04,360 --> 00:01:08,750 So we're going to put the event on the UL which is its parent. 18 00:01:08,950 --> 00:01:12,500 And then we're going to target the list item that we want. 19 00:01:12,550 --> 00:01:18,490 Now this is actually needed in this situation because all of these these lengths these are actually 20 00:01:18,490 --> 00:01:24,220 what I want to target because they have the class of delete item and we want to target this link right 21 00:01:24,220 --> 00:01:24,840 here. 22 00:01:25,030 --> 00:01:28,460 So since these are all the same we need to use event delegation. 23 00:01:28,480 --> 00:01:28,740 All right. 24 00:01:28,750 --> 00:01:34,440 But before we get into that I want to give you a better example of how event bubbling works. 25 00:01:34,450 --> 00:01:34,750 All right. 26 00:01:34,750 --> 00:01:36,090 So let's go over here. 27 00:01:36,320 --> 00:01:39,080 Event bubbling. 28 00:01:39,220 --> 00:01:42,220 And what I'm going to do is I'm going to say document Daut 29 00:01:44,940 --> 00:01:53,780 whereis selector and we're going to grab the car title class OK which is this right. 30 00:01:54,010 --> 00:02:01,670 Yeah I think it's is it this or that card title is your task list. 31 00:02:01,680 --> 00:02:03,300 This right here. 32 00:02:03,300 --> 00:02:15,660 So we're going to do is we're going to add an event listener for wiseness working for click and we'll 33 00:02:15,660 --> 00:02:23,370 just we'll just put a function in here and then we'll say console dog log and we'll just say the element 34 00:02:23,370 --> 00:02:25,990 that it is which is card title. 35 00:02:26,010 --> 00:02:29,970 All right so let's save that and let's go up here and click and we get card title. 36 00:02:29,970 --> 00:02:36,510 Now just to prove to you that this bubbles up what I'm also going to do is put in event listener on 37 00:02:37,320 --> 00:02:40,880 its parent which is card content. 38 00:02:40,890 --> 00:02:41,190 All right. 39 00:02:41,190 --> 00:02:51,550 So we're going to change this to card content and then we're going to console log card content. 40 00:02:51,960 --> 00:02:57,130 All right now Card content has a parent of the idea of Maine. 41 00:02:57,360 --> 00:03:00,670 So the class of card actually will use that. 42 00:03:01,050 --> 00:03:09,670 So go ahead and paste this in and we'll say card and then we'll just say console a car let's take it 43 00:03:09,670 --> 00:03:21,870 a step further and go to the class of call they set in change just to call and we'll just say console 44 00:03:21,870 --> 00:03:22,600 on call. 45 00:03:22,600 --> 00:03:23,110 All right. 46 00:03:23,410 --> 00:03:29,350 So with the event bubbling what's going to happen is that when I click on this card title which is task 47 00:03:29,350 --> 00:03:34,790 list right here it's going to bubble up and then all of these will actually be called. 48 00:03:34,810 --> 00:03:38,890 Even though we're not going to actually click on any of these They're going to be called. 49 00:03:38,890 --> 00:03:42,840 So I'm going to go up to right here task list and click and look at that. 50 00:03:42,910 --> 00:03:50,500 All of those events all of those fired off I didn't click on any of those things but they fire off because 51 00:03:50,500 --> 00:03:53,530 of the event bubbling it bubbles up the dam. 52 00:03:53,560 --> 00:03:53,930 All right. 53 00:03:53,930 --> 00:04:00,620 So I think that that gives that should give you a good example visually of how that how that works. 54 00:04:02,000 --> 00:04:08,180 OK so I'm going to just comment all this out and now we're going to look at event delegation 55 00:04:11,840 --> 00:04:15,200 OK and it can kind of be described as the opposite. 56 00:04:15,200 --> 00:04:19,020 We're putting the event listener on a parent and then going down. 57 00:04:19,320 --> 00:04:19,720 All right. 58 00:04:19,730 --> 00:04:28,260 So let's go ahead and you know before we get into that let let me show you what happens without delegation 59 00:04:28,320 --> 00:04:32,450 in this situation where we have all these these delete item classes. 60 00:04:32,490 --> 00:04:41,070 So if I were to say Konst we can't use delete that's a reserved word we'll say delete item and set that 61 00:04:41,070 --> 00:04:43,230 to document 62 00:04:45,570 --> 00:04:48,360 Daut query selector 63 00:04:51,140 --> 00:05:02,470 and we want the class of delete item OK which is these links all have a class to the item and then we'll 64 00:05:02,620 --> 00:05:08,830 do eat item Daut out event listener click 65 00:05:12,370 --> 00:05:21,780 and then we'll call a function called delete item. 66 00:05:22,940 --> 00:05:32,300 I can't call that let's call it we'll call this Dao item. 67 00:05:32,730 --> 00:05:33,000 All right. 68 00:05:33,000 --> 00:05:39,800 So Dell item an event listener calls a function call delete item and let's just do a console logged 69 00:05:41,340 --> 00:05:43,810 and we'll just say delete it. 70 00:05:43,860 --> 00:05:45,480 All right so let's save that. 71 00:05:45,540 --> 00:05:50,760 And what I'm going to do is go over to this link right here which if we look at if we inspect it 72 00:05:54,020 --> 00:05:57,630 you can see it has a class of delete item. 73 00:05:57,650 --> 00:05:58,010 All right. 74 00:05:58,010 --> 00:06:00,290 So let's go ahead and click on it. 75 00:06:01,810 --> 00:06:04,100 And in the console we get delete item. 76 00:06:04,130 --> 00:06:09,860 Now let's reload the page and let's click on the next one no delete item OK. 77 00:06:09,890 --> 00:06:12,640 None of these none of these other ones are working. 78 00:06:12,740 --> 00:06:14,610 Only the first one is working. 79 00:06:14,840 --> 00:06:15,180 All right. 80 00:06:15,200 --> 00:06:22,700 So this is a situation where we need to use event delegation I'll write another situation where you 81 00:06:22,700 --> 00:06:28,970 need to use event delegation if you dynamically insert something into the dorm through javascript. 82 00:06:28,970 --> 00:06:35,360 For example if we insert a new list item that was not there when the page loaded then you also need 83 00:06:35,360 --> 00:06:37,220 to use event delegation. 84 00:06:37,220 --> 00:06:46,740 So I'm going to comment out these two lines and instead of putting the event listener onto you know 85 00:06:46,760 --> 00:06:52,210 right onto that delete item class we're going to choose a parent OK and this could be anything. 86 00:06:52,250 --> 00:06:54,440 Actually we'll just put it on the body. 87 00:06:54,440 --> 00:07:07,130 We can say document dot body dot at eventless listener and we'll say click and we'll call delete item. 88 00:07:07,130 --> 00:07:12,470 All right so if we leave it just as is you can probably guess what's going to happen if I click anywhere 89 00:07:12,830 --> 00:07:18,580 in the body we're gonna get really I mean that's obviously not we want we want to target these here. 90 00:07:18,770 --> 00:07:26,460 So what we need to do is go into our function here delete item and we need to find the target. 91 00:07:26,460 --> 00:07:26,850 All right. 92 00:07:26,860 --> 00:07:27,450 So. 93 00:07:27,450 --> 00:07:33,700 Console dot log the dot target and save. 94 00:07:33,940 --> 00:07:36,980 And we didn't pass any here. 95 00:07:39,890 --> 00:07:44,160 OK so if I click anywhere you can see it's going to actually give us the element that was clicked. 96 00:07:44,160 --> 00:07:45,690 There's the list item. 97 00:07:45,840 --> 00:07:50,930 There's the five there is the one that actually got redirected. 98 00:07:50,930 --> 00:07:52,590 And if we click on here. 99 00:07:53,180 --> 00:07:57,210 Now this this is something else we're going to have to address if I click on this x. 100 00:07:57,260 --> 00:08:04,360 It actually gets the eye tag which is in the tag you can see it's actually getting this instead of this. 101 00:08:04,400 --> 00:08:08,240 We're going to have to get the parent of that but we're going to get to that in a second. 102 00:08:09,550 --> 00:08:16,000 So you can see that we can get the target wherever we click so we have to do some conditional statement 103 00:08:16,000 --> 00:08:19,900 here and there is a couple of ways we can do it. 104 00:08:19,930 --> 00:08:30,630 A lot of times you'll see if e dot target dot the class name equals a certain class. 105 00:08:30,640 --> 00:08:36,280 All right so delete item or something like that. 106 00:08:36,490 --> 00:08:43,120 Now like I showed you the target when we click here is actually the tags so that's what we're going 107 00:08:43,120 --> 00:08:44,430 to have to search for. 108 00:08:44,470 --> 00:08:53,370 Right now if we want this to work so I'll say FAA has a class of FAA and then FAA Dasch remove. 109 00:08:53,970 --> 00:08:54,460 OK. 110 00:08:54,490 --> 00:09:01,840 And then down here I'm going to just take this console log delete item out and paste that in there we 111 00:09:01,840 --> 00:09:03,370 can get rid of this. 112 00:09:03,400 --> 00:09:07,790 So now if I click anywhere else it's not working right. 113 00:09:07,800 --> 00:09:14,410 And if I click on the X now we get delete item and if I click on any x we get delete item. 114 00:09:14,440 --> 00:09:19,670 So it now works rather than just choosing the first one. 115 00:09:20,230 --> 00:09:26,510 Now I don't want to deal with the icon that I want to deal with the tag around it which is its parent. 116 00:09:26,530 --> 00:09:33,420 So what I'm going to do is I'm going to say Target dot parent element. 117 00:09:33,430 --> 00:09:37,020 OK remember we learned about this in the traversing lecture. 118 00:09:37,180 --> 00:09:44,870 But if we get parent element and we say equal to delete Dasch item. 119 00:09:44,920 --> 00:09:50,950 Now if I save this and we try this out it's not going to work because if we look at that a tag it also 120 00:09:50,950 --> 00:09:53,340 has a class of secondary content. 121 00:09:53,410 --> 00:09:59,490 And what this class name does is it looks at the entire string that's inside the class attribute. 122 00:09:59,490 --> 00:10:01,450 So we have to match that whole thing. 123 00:10:01,450 --> 00:10:08,320 So we would also have to do secondary content like that and save. 124 00:10:08,320 --> 00:10:09,940 And now that works. 125 00:10:09,940 --> 00:10:15,970 Now this isn't really a great way to do it because if for some reason you add like let's say the last 126 00:10:15,970 --> 00:10:21,380 one here we added a new class of test and save. 127 00:10:21,400 --> 00:10:27,360 Now the last one does not work because it doesn't match that class String because we add a test. 128 00:10:27,610 --> 00:10:37,000 So a better way to do this in this situation would be to not check the class name but to use class list 129 00:10:37,030 --> 00:10:40,450 and see if the lead item is in that list. 130 00:10:40,450 --> 00:10:42,760 All right so I'm going to keep this you guys have it. 131 00:10:42,760 --> 00:10:49,120 I'm going to copy it and then comment it out and then instead of doing Doc class name we're going to 132 00:10:49,120 --> 00:10:55,340 do a class list Daut contains OK. 133 00:10:55,360 --> 00:11:02,160 And then that's actually a method so we want to get rid of that in this. 134 00:11:02,280 --> 00:11:04,620 I want to say contains. 135 00:11:05,070 --> 00:11:09,930 And then the class that we're looking for which is delete Dasch item. 136 00:11:10,500 --> 00:11:14,700 OK so now if we save now it works. 137 00:11:14,920 --> 00:11:15,310 All right. 138 00:11:15,330 --> 00:11:22,740 And even if we were to go to that last list item in the link put in another class like test it's still 139 00:11:22,740 --> 00:11:29,190 going to work ok because it has that daily item in there so that's a that's the best way in my opinion 140 00:11:29,190 --> 00:11:32,380 to target one of these one of these links. 141 00:11:33,600 --> 00:11:38,820 All right now let's actually add the functionality of making this delete the list item. 142 00:11:38,850 --> 00:11:46,910 So remember when we clicked this we're targeting the target parent element is the a tag. 143 00:11:46,910 --> 00:11:55,010 Now if we look at our markup here we want to delete the whole list item which is the parent of the tag. 144 00:11:55,020 --> 00:12:05,580 So what we could do is we could say don't target which is the tag remember it's the icon get the parent 145 00:12:07,410 --> 00:12:14,130 element which is the a tag and then get the parent of that which is the list item and then we can simply 146 00:12:14,520 --> 00:12:16,800 remove it. 147 00:12:16,880 --> 00:12:18,070 So Nalut save that. 148 00:12:18,080 --> 00:12:22,920 And let's go ahead and click the X here and it will remove it. 149 00:12:23,480 --> 00:12:25,880 So you can now remove our tasks. 150 00:12:26,250 --> 00:12:31,020 If I reload it's going to obviously come back because this is just in the UI we're not persisting data 151 00:12:31,050 --> 00:12:37,090 to a database or anything like that but you can see we can remove them from the dorm now. 152 00:12:37,110 --> 00:12:43,770 So the whole the whole definition of event delegation in simple terms is just putting the listener on 153 00:12:43,770 --> 00:12:49,700 a pairing of what you're looking for and then putting a condition in here to try to find the target. 154 00:12:49,740 --> 00:12:54,820 OK using this target and then doing your functionality there. 155 00:12:54,840 --> 00:12:55,510 All right. 156 00:12:55,770 --> 00:13:02,190 So hopefully that wasn't too confusing in the next video we're actually going to start on this entire 157 00:13:02,190 --> 00:13:02,910 application. 158 00:13:02,910 --> 00:13:04,350 It's going to be pretty simple. 159 00:13:04,350 --> 00:13:09,040 We're just going to be able to add to the list delete which we actually just did right here. 160 00:13:09,150 --> 00:13:16,050 But we're going to put it into a way that is a full application and structure it nicely and so on. 161 00:13:16,140 --> 00:13:20,910 Also implement the clear tasks we're even going to add a little filter so we can filter through the 162 00:13:20,910 --> 00:13:22,130 list items. 163 00:13:22,140 --> 00:13:22,450 All right. 164 00:13:22,470 --> 00:13:28,610 And then later on after we talk about storage after we talk about local storage in the browser will 165 00:13:28,680 --> 00:13:35,760 make it so that these items or these tasks will get saved in the local storage so that when we close 166 00:13:35,760 --> 00:13:41,420 the application or we reload they'll still be there and we can actually persist the data. 167 00:13:41,640 --> 00:13:44,730 All right so thanks for watching guys and I'll see you in the next video.