Document Object Model Series 2023 - Part 5: Event Hierarchy, Capturing and Bubbling

1. Class Introduction - Capturing & Bubbling: Welcome, welcome, welcome to yet another very exciting class and an entire series about the DOM, the Document Object Model. I'm Clyde, I'm going to be your instructor and Gerst loss is going to be very advanced. But don't worry, if you're new to development, I will explain the basics. But if you are a new developer and you haven't been following me in my other previous classes. I do encourage you to do those first because they all build up upon each other to get to this point, putting that all sides are what is this clause all about? Well, I'll take a step back. You know that the different objects in the DOM, right? We've got native objects and we've got JavaScript objects, which are different to each other. And they all have their own properties and methods. These properties and methods come as the result of what's known as inheritance. And it's very important for you to understand this hierarchical structure, which is why in this class I'm going to start off explaining what the hierarchical structure is and what I mean by inheritance. But then after that, we discuss two very, very important concepts when it comes to events. Remember in the previous class we discussed events, a lot of detail. Well, you would agree with me events kind of have to come from somewhere, right? Well, that's some way is known as event capturing. It's got to start some way and traveled down to whichever element triggered that event, right? If it's a button, represent a div tag, for example, let's go to travel all the way down to the end of the day. That's known as event capturing. On the other hand, on the flip side of the coin, we've got event bubbling. And that is a concept that events bubble up the DOM tree and that's why it's important to know about navigating the DOM, which we've covered in a previous class as well. So really this course is going to be heavy. I'm going to explain it at a very, very fun and very intuitive level. So don't worry if you haven't followed rarely on other classes, unless you really are starting out. And I do encourage you to maybe pause this right now and then go back and enjoying it. But if you have followed along grades but continuing, if you're good with development, Great, you're gonna learn something new. Really conflict. We're going to be cutting up practical examples. I'm going to be giving you challenges. That's going to be pretty honest about your students audios. And I'll see you in the filters lytic. 2. JavaScript objects vs DOM objects: This is going to be an incredibly interesting section, quite advanced or may end. And before we start jumping into complicated discussions about hierarchies and prototypes, I wanna jump to the console. I want to show you why practically can become an important thing. And what I wanna do is I want to do two things. Now. I want to create a JavaScript object and access its prototype. And I want to create a DOM object and access its prototype. By the way, if you're not too sure what a prototype is, a go into a lot of detail in my JavaScript complete grandmaster course. So please check it out if you're interested. If you know what prototypes are, great, you'll be able to follow along. If you're not quite sure and you don't want to do my course desiccate to just quickly Google it. In short, prototype is just kind of like a period that you inherit something from. So if an object doesn't have that exact functional property you're after passes pretty much going to work its way up the prototype chain to try and find it made little property that you're often. So anyway, here we are in a plane browser. All I wanna do is I want to open up the console and I wanna just code two things as I'm injured very, very quickly. Let's go to the console. Just dock this in a new window. There we go. And now let's start coding. And let me zoom in here just so it's easier to see. Okay, so the first thing I'm gonna do is let's create a JavaScript object. And this defines object is dog. And we can just say this dog goes with simple enough, right? But have you ever wondered why we have a whole lot of properties and methods straight out of the box. For example, we can access our dog object and look at all these properties and methods. They are a ton of them. So for example, we can access to uppercase. We execute that, and of course we get wolf, but now all in capital letters. Why is this? Well, the starting point is to understand prototypes. If we access our dog object and we look at its prototype. And we loved this out to the screen. We get this string object. Now the string object is native to JavaScripts. And if we open up this object, it has a whole lot of properties and methods, of course, that this dog has access to. So if we scroll down, we should see two uppercase. And there it is, two uppercase. So that's why we have certain things available to us straight out of the box. And this is, as I mentioned, JavaScript. But now let's create a DOM object, is defined it in a variable called p, and in this instance lists xs. I'll document objects and leads creates an element. You will know from part 1 that this is a DOM API method create element. So pretty cool, right? We have just created our object. But now if we try and access our paragraph object, and again we try and now execute the same function as we did with dog. We get a type error to uppercase is not a function. What is in this kind of weird? We'll again steep bank. Let's look at its prototype. So we access our object and we look at its prototype. That's interesting. We can see here the prototype is not string. In fact, its prototype is the HTML paragraph element. And if we open this app, we can see it has a whole lot of other properties and methods different from the ones we created in JavaScript. Isn't that interesting? So before we move on, I wanted you to just get a sense of why all of this becomes important. We need to start understanding way things are coming from end. Weird kind of fits in. And you can really tell that broadly speaking, two different types of objects. We've got these JavaScript objects, which you'll see in the next lecture are called native objects. And we also have this other object, call it a host object that's provided to us by the host, in this case by the browser. But I'd only give too much away. I'll see you in the next lecture. 3. Host vs Native objects: Before we move on to discuss hierarchies and how that all works, we need to understand the difference between native and host objects. And I briefly mentioned it in the previous lecture, but I want to expand a little more now. In my JavaScript complete grandmaster course, we covered prototypes in detail, so please check it out if you're unsure. But putting prototypes aside, I don't want you to get confused between JavaScript objects and DOM objects. In surprisingly, there's not a lot of information about this on the wave. That's really hard to come by, but no stress. That's exactly why I'm here. Alright, so where should we start? We know that every node in the DOM inherit methods and properties from its parent node. And if you want to talk in JavaScript language, we could just say that every object in JavaScript inherits methods and properties from its parent object. It's the same thing. And when it comes to JavaScript, pretty much everything is an object. It's not quite true. Not everything in JavaScript is an object, but almost everything is. And it's the same in the DOM. Pretty much everything in the DOM is a node. The point I'm trying to make is that every object or every node contains a private property which holds a link to its prototype. And we saw we could access the underscore, underscore proto, under squander school in order to see its prototype, every single object and node has this property. Or a high tide. What's your point? In a nutshell, point I'm trying to make is that a node is a generic term for any type of object in the DOM. And we know when it comes to JavaScript and object is a complex data type. So it all boils down to this. We can save in that they are object types country. And let's look at these two object types. I'm sure you've already guessed it. We've got a native object type and we've got a host object type. Well firstly, let's look at this native object. These are core pre-defined objects that are always available in JavaScript. And very importantly, these objects of seat out in the ECMO script specification, people just call it the spake. So remember that a native object is fully defined by the script specification rather than by the host environment or IDE water. Some examples of native objects, they include things like object, function, string, mess, Boolean, ex cetera, et cetera. They are a lot of them in JavaScript. But let's now get back to our example. We just coded to get it. Remember we defined a variable called dog and we assign that to the string WAF. And if we use JavaScript's type of operator and we pass in the dog, what is going to be returned to us? Well, we saw that when we exist It's prototype. It was a string. And yes, this dog object is a native object. You could argue the client, the ECMO script speak doesn't define our dog variable and you're right, but this dog is still an active object with an internal class of string. And that string is defined by the ECMO script specification and a fly eye. Some people breakdown objects into three broad categories. Another one being a user object. And they say that this dog is a user object, but I kind of view the mess hand in hand, a user object and a native object of very, very close. And that's why I'm saying this dog object is a native 1.5. Let's get rid of that and let's move on to the second object type, and that is host objects. At its core, a host object is provided by a specific environment in order to serve a specific purpose to their environment that's not defined by the specification. And very importantly now he must get us, not all environments have the same host objects. So if JavaScript runs outside of the browser, for example, if it runs as a server-side scripting language in an environment like Node.js, different host objects will be available. For example, host objects in Node.js or HTTP, HTTPS if S, URL arrays, et cetera, et cetera. But we know when it comes to the browser, our host objects are very different. We've got the window, we've got the documents, we've got history, we've got the XML HTTP request, et cetra, et cetra. And what's another example of a host object? Code up a little example here. Let's say we define a variable P and we use one of the axis methods in the DOM to retrieve that element. Here we used a method called getElementsByTagName. And in part one of the series, you know very well that this is a DOM API method and it returns to us a node list. The point I'm trying to make is that this paragraph element may feel like a normal JavaScript object. But it's not donated full. You object referenced by our p variable is a node list. And a node list is not defined any way in the script specification. So we know that what's returned to us by this getElementsByTagName is a host object. Does that kinda making scenes who hubs or a hand recovering a lot. But let's move on. Let's get rid of that, get rid of all that noise. And now I want us to talk about the window object. The window object is provided to us by the browser, by the host. And what's really cool about this window object is that it gives us access to things like the DOM, the bomb, and it allows JavaScript to run within it. Importantly, all web browsers support the window object. And this window object is our root object. It's given to us by the browser. Okay, so what are some of the host objects within the DOM? We've seen some of them already in this course. The most common you've seen is this document object. This object refers to the HTML or XML content displayed in the browser window. But we have a lot of other objects provided to us by the DOM, like the event object, the console, the node object, even the HTML paragraph element object that we saw in the previous example, cetera, et cetera. There are a ton of fun. We also have bomber, browser, object, model objects, don't we? Things like screen history frames, the navigator, et cetera, et cetera. And finally, we've got native JavaScript objects. All those green objects, or what we referred to as native JavaScript objects, things like the object and number, date, string, Situ, et cetera. Okay, before we finish off, you might just be wondering Clyde, what is the difference between the DOM BOM? Firstly, I want to say that we can argue that the host, aka our browser, has provided us with access to all of the DOM and the bomb objects straight out of the box. And for this reason these objects are referred to as host objects. What is the real difference between the DOM and the bomb? Will in part 1 of this course, you learned that the DOM is a standard seat and maintained by the World Wide Web Consortium or W3C for short. And they define how we browsers should interpret an HTML or XML document. So you could kind of say the DOM is governed by a specific body. What about the bomb, the browser object model? The BOM defines how browsers handle the view in some other properties of a document as opposed to its contents, which is primarily what the DOM covers. Zai Maxine's. A very important point to make here is that unlike the DOM, the bomb is not a standard set by any organization. So it's kind of more like an approach that we use as programmers. It allows us to take advantage of the fact that all web browsers support certain objects and related methods. But anyway, I just wanted to put that aside just so you understand kind of how I'm grouping DOM and bomb into host objects and why I'm grouping JavaScript into a separate category all by itself referred to as native objects. And we know JavaScript is governed obviously by a organization that AIG must script specification to be specific. And all of its objects are defined by that organization or by that spec. And that's why we can separate out native versus host. I hope this lecture has made scenes a happy feeling, a lot more comfortable with the soul. But don't worry, we're going to be getting into more detail in upcoming lectures. And now I want us to jump to high Aki. I want us to focus on these host objects because again, this is what this course is all about. We're about the DOM, how to manipulate the DOM, how to make your pages more dynamic. And of course, in order to do that, we have to work with nodes. And nodes, as we just mentioned, are the DOM objects and these are host objects. And that's why I want to focus on host objects, cool harbors, making saints. And I'll see you in the next lecture. 4. Inheritance: It's time now to look at the hierarchy of nodes. Understanding the node hierarchy will allow us to understand how nodes get all the methods and properties. Right now, we know that the DOM has a whole bunch of objects slash nodes given to us straight out of the box. And we also know that these node objects, aka host objects, or different to JavaScript or native objects. Going forward, I want to concentrate now only on the host node objects. Although a lot of these concepts that we're going to be talking about will equally apply to JavaScript native objects. Okay, so what is the starting point? What do we need to learn? Well, the full set of properties and methods of a node comes as the result of something known as inheritance. Inheritance, the passing of titled to an estate upon death. I'm not talking about legal inheritance. I'm talking about DOM inheritance. It just means that some node objects by default will inherit values, aka properties and methods that are state on its parent object. Does economic scenes. It's all inheritance means. But in order to understand inheritance a little bit more, Let's look at way as simple method comes from. So right now I don't want to look at a node object. I hate you just want to be even simpler. I want to look at a simple method. We know that to create modifier move or excess elements, we always have to start at the root. We have to access the document object. For example, to create a paragraph element, we have to type document dot create elements, and we pass in the limit we want to create. Here we want to create a paragraph. The question I have for you though is way does this method, this create, eliminate admitted, come from you might be thinking it comes from the document object, right? Because we access the documents and we exist a method on it called create element. Well, the answer may surprise you. Let's jump over to the console and let's try and find. This creates elements together. 5. Finding where the createElement() method comes from: All right, Let's find this create element method. We could it be? Well firstly, let's access our console. And we go and let's just make this a full-size page. And let's try and find it. It means Romania, so you can see a bit better. Well, firstly, let me start with the most obvious solution. If we just try and access our window object and we open up this window object, you can really see if we sort alphabetically, there is no create element method. So we know it's not on the window object. And this kinda makes sense. We already know when we access this method creates element. We started at the document object. So let's now look at the document object. I just want to console HDR, the window document. So these are document object represented in JSON like format. Just if we didn't have to access the window in order to access the document. By default, all global objects or methods are available without using the keyword window. So we actually could have just gone console the document. That's just a bit as if we are, if we open up this document and we try and look for the create element method. You'll notice here we cannot find it. Can we know it to be seen? A quick thing we can do is we can go Control a and we can just try and find it at the bottom, but typing in create element, and it's nowhere to be found. You cannot find it. So that's quite interesting. So now it's not on the window object, that's not on the document object. Well, where is it? We are going to have to start looking at inheritance. And in order to do that, we can look at the documents prototype, aka we can look at way it's most immediate parent is. So if you open up our document object and we scroll right to the bottom, you'll see that we have It's prototype at being this HTML document. And if we open that prototype, the HTML document object, again, we can see that the create method is not here. So let's scroll to its prototype, that HTML determine prototype. And here we get another one called document, but this time a capital D. We went through this in detail in Part 1 of this course. But anyway, let's open up that object. And the good news is, if we scroll down here, and here it is My dear students that create element method. So my point about inheritance is this, when the parser comes across our create element method on the document object, the small d I may add, it's not there. The parser has to then work its way up the prototype chain. And eventually it's going to find this create element method on the grandparent of the document object, this big D document object, and this is how inheritance works. The document object inherits the create element method from the big D document object. Who, who isn't that? Awesome? I hope you having fun. I hope you're learning a lot in this course series. The sum of these things are very advanced. Bad, we're only just getting started. And we started with a very simple example. We looked at the document object within the DOM, and we followed that all the way up in order to find where one of its methods come from, Henry found that it was on its grandparent. I can prove that to you, but going document, we can look at its proto type, which is that HTML. Remember that document? And we can look at its prototype. And that should be the big D, the document. And we know in that big D in this document object, that was where the method came from. So this was a very specific example, a very simple one. But I now want to step away from the document object in the DOM. And I wanna look at a specific node object within the DOM. And I want to follow that node objects hierarchy up the prototype chain so we can better understand the DOM. It's going to be very, very interesting. So I'll see you in the next lecture and let's start looking now at node hierarchies. 6. Element node hierarchy: Okay, I keep telling you in and look at node hierarchy and we keep delaying it no longer. Let's jump into it right now. Let's start by creating a very simple paragraph element with an abdominal. We know that this is going to be a DOM object. Wait, wait, wait, wait, wait. How do we know it's a DOM object? Let me show you. All right, so how do we know that our paragraph element is a DOM object will first thing I want to do is let's define a variable called paragraph and it's create one. So document create elements. And we want to create a paragraph element, don't we? All we need to do to determine its object type as what model. The easiest way I can think of is we can alert it to the screen. And we can see here that the returned item is an object. And what type of object is it? It's an HTML paragraph element, object. And neck, my dear students is a DOM object. How do we know it's DOM object? Will know it sounds kind of strange, but we know it's DOM object because it's not a JavaScript object. For example, if we define a new variable called object, and we just use the curly braces, there many different ways to create an object in JavaScript. By the way, this is just one of them. It's very quick way to do it. It's actually very similar, if not the same to calling new object. And we just tossing null as its prototype. That's all it does. Curly braces are doing. So there we go. We've got an object. And if we alert this object, what are we going to see? Well, there we go. We know it's an object and we know it's of type object with a big O. And that big O object is a JavaScript object whom? So we've just shown that that paragraph that we've just created Is a DOM object. Okay, cool. So we've got our paragraph, we know it's a DOM object. Let's start working our way up the hierarchical structure. Its prototype is going to be, in this instance, the HTML paragraph element. Whoa, whoa, whoa, whoa, whoa. How do we know its prototype is the HTML paragraph element? Again, let me just quickly jump over to the console and show you. Okay, how do we know that the prototype of this paragraph that we've created is the HTML paragraph element. Will all we have to do is access our paragraph object. And of course we have to access its prototype. And there we go. It's prototype is this HTML paragraph element. Great, hope it's making sense. Now, the HTML paragraph element also has a prototype, and its prototype is the HTML element object. I'm sure you're getting the hang of this now, but how do we know that the HTML paragraph element has a prototype of HTML element? While the two ways we can find that out, the first and most easy ways to open up this HTML paragraph element object. And of course we can go to the very bottom and we can look at its proton. And that proton is the HTML element. The second way we can do it if you didn't want to open it up as we could access our prototype odds, the paragraph object we've created. And then we can look at its prototype property. And of course we get the HTML element. I hope this is making sense. Let's jump back to the lecture. I think you're getting the point now how he finding the prototypes. So I'm not gonna keep showing you with the prototypes are coming from. You can just take my word for it, but I highly encourage you to go and check yourself. It's a worthwhile exercise. So let's continue this exercise. The HTML element also has a prototype. It's prototype is going to be the element object. Its prototype is going to be the node object. It's prototype is going to be the event target. And now this is interesting. Hold on TO change. The ultimate prototype is object prototype. And what's fascinating is that this object prototype comes from JavaScript. It's the JavaScript object prototype. And if y in case you're wondering, the prototype of the object itself is null. So it means that this object, and what is super interesting, what's going to blow your mind is that this means if you just look at this high level structure, it means that our DOM object in this instance is also a JavaScript object. I know it can get really confusing and it can seem that way. And that's why the two are so closely intertwined, they're so closely related. So just remember in the browser's context, DOM objects are also JavaScript objects because of this hierarchical structure. And of course the reciprocal is not true. Javascript objects are not automatically DOM objects. Okay, But why do we have all these different types of objects? What is going on? Yeah, well, let's start at the very top. Lids taught at this event target object will firstly, this event target is the root object and it serves as. Base for all the nodes. In other words, deceiving target allows all nodes in our DOM to utilize events. As an example, it gives us access to the addEventListener method. When we start using those methods are not elements. This is where it comes from. Isn't that interesting? So just remember the event target is a DOM interface and it's implemented by all node objects. They can receive events and they can have listeners for them. We know that we can put event listeners on elements, the document, even the window object, the most common even targets, but it doesn't stop at these simple examples. Other objects can also be event targets to, for example, the XML HTTP request object, the audio node object and audio context object and a whole plethora of others. And it's an FYI because we know that all these nodes ultimately inherit from that object. Remember from the JavaScript object, we have various other methods available to us. Plane object methods like has own property. For example, I should have mentioned that earlier. I just thought I'd throw it in now because I've just thought of it. Anyway, let's move on. That's the event target. Let's start working our way down. We've also got this node object, right? This node object allows us to traverse the DOM. In other words, it gives us methods like parent node, child nodes, next sibling, et cetera, et cetera. These methods are just called heaters because we actually trying to retrieve something many of the nodes you and I are going to work with inherit from this node, including our paragraph element we've just created. That has I keep mentioning there are many other concrete node classes that inherit from this. Namely that takes node 4, takes nodes eliminated for 11 nodes and more exotic ones like the comic nodes. But what am I talking about? You already know this. Let's continue working our way back down. What's this element? This element is the base class for all DOM elements. And as the name suggests, this object helps us to traverse only element items. So for example, it gives us access to methods like mixed elements of link, the children method, which as you know, can only be used on elements and the query selector, et cetera, et cetera. I'm giving you these handful of examples because I know we've worked with him previously, but as I keep alluding to, it doesn't stop just with these methods and are mentioning, for instance, this element clause that serves as a base for more specific clauses like the SVG element, XML elements. And of course, it also serves as a base for the HTML elements. So let's now talk about this HTML element. Rather intuitively, this interface is available to any HTML elements on our page. And it specifies operations in queries that can be made on any HTML element. And this HTML element is inherited by a more specific, concrete HTML element. In our case, because we created a paragraph, it was inherited by the HTML paragraph element. And remember each tag, a paragraph or a div, an image, an anchor tag. Each one has its own unique object that it inherits from. For example, the anchor tag will not inherit from the HTML paragraph element. It will inherit from the HTML anchor element. And each object class like this provides specific properties and methods to whatever element you're working on. For example, an element node corresponding to a tag. And a tag has link related properties, and one corresponding to an input tag has input related properties and so on and so forth. Who, who have come an incredibly far away now. And I hope you're having fun and taking all this information in. And it's taken me a very long time to learn it and trying to put it together in a very simple and intuitive, fun way. And just remember that every object in the DOM has a hierarchical structure similar to this. It won't be exactly the same at depends on what we're working with. A lot of them are going to be inheriting from the same sort of things. For example, we know that we have takes nodes as well. We don't just have element nodes that we've dealt with yet. Dewey and takes notes are not the same as element nodes, but they are also common properties and methods between all of them. Because all classes of dominoes or from a single hierarchy, eventually, that event target, for example, will apply equally to take snows and common nodes as it does to eliminate. The point I'm trying to make is that this is what the hierarchy is all about. And if you ever find yourself in a hole, you'll now know how to dig yourself out because you'll know how to find that method. You know, if, if you expecting a certain method to be on a certain node type, you can find it on. I hope that now you might know why. But anyway, we still got quite a few things I want to come in this section before we move on scene up. 7. Inheritance - summary: Or odd, we've come a long way. I just want to take a step back and just summarize what we've learned when it comes to node hierarchy. We've seen at the full set of properties and methods of a given node comes from inheritance. And specifically, we looked at the paragraph element which we created, which gets its properties and methods from. That's right, the HTML paragraph element, which gets its properties and methods from the HTML element. It gets its properties and made it from an element. It gets its properties and methods from the node, and it gets its properties and methods from the event target. That was a bit of a mouthful. And we also learned that each specific type of prototypal object is the for a purpose. For example, the HTML paragraph element provides paragraph specific properties. The HTML element provides common HTML element methods such as getters and setters. We know that element object provides general element method. Remember we looked at some of those. The node provides general DOM node properties and the event target is perhaps the most important one. This is the root of most of the methods we're going to be working with. And this gives support for events like the add event listener. There we go. I just wanted to take a step back. So you can kinda see at a very high level what we've just covered. But before we finish off this section, I want us to discuss something else. I want us to look at how dumb extinctions work. This is not a very publicized topic, but it's very, very interesting. So let's get onto that in the next lecture. 8. DOM extensions - intro: We've come a long way in this section, but I just want to quickly mention practice of DOM extinction. Firstly, what is it? Dumb extinction is just the process of adding custom methods and properties to DOM objects. Remainder, DOM objects are watching. And introns don't objects or host objects. Specifically DOM objects or Hearst objects that inherit from the element event document or any other DOM interface. We've been through this notice. And the whole concept of extinctions, DOM extinctions. Well, to add these properties and methods to these host objects. And you can either add to these objects directly or to the prototypes. For days we will see shortly, you can only do this in environments that have proper support for the most popular extended objects or DOM elements, like the paragraph or the div tags, IE, elements that inherit from the element interface from the DOM. These are the most popular things a lot of developers want to add extinctions onto because it's what we work with the most. And because it's so popular, there is a lot of libraries and third-party packages that have expanded and allow these things to happen, like prototype or Moo tools. But anyway, let me not lose track of this lecture. Let's get rid of that and let's now look at a paragraph element. Do you remember we walked up the hierarchy of this node element. How does that look? Well, that's rods are paragraph starts as an object, does not an element object to be specific. And when we looked at its prototype, it was this HTML paragraph element. And obviously this object is going to be specific to the type of element for our paragraph. Yeah, we can see it's the HTML paragraph element. For a div element, it's not going to be that, it's going to be the HTML div element. For the anchor element, that's going to be HTML element and so on and so forth. By the way, why are these main, sit like this? Why are they so strange? Well, you and I don't sit these names. They are defined by the DOM HTML specification and et cetera, same spec, that same specification net also defines inheritance between different interfaces. So anyway, that's just a bit of information. The HTML paragraph elements, What's its prototype? It's the HTML element. Its prototype is the element, its prototype is the node. We then get to the very important event target. And as we saw in the previous lecture, the ultimate object is the object. And of course its prototype is null. That's why with more detail. Okay, Clyde, this is great. I know all this, but why are we looking at it again? Well, I want to do a DOM exchanging with you. I actually want to jump to the takes data to known. I want us to start coding something. So let's add an extinction that's at our own custom method to one of these nodes, these objects. And let me just suck my thumb and pick a random one that is just look at this element. And let's add our own custom method on this element host object. Let's do that now. That would be really fun. 9. Adding our own DOM extension: All right, how does this DOM extinction work? And let's look at an example. What do we want to do? Well, let's just say we want to create a function called read that we can use on any element we create. And it just changes that elements color. To read. Very simple writes, very intuitive. So here we are just in the browser console. I'm not using any fancy IDE. We just in Chrome's console. I'm going to expand this just so we can see it in a full screen. And let me zoom in slightly. All right, so what I'm gonna do is we're going to access that element object, right? And remember, this is provided to us by the DOM. This is a host object. And now what I wanna do is I want to access its prototype and I wanna define a function called reading. What I wanna do, this is a custom function and we're going to make, hang on Clyde. Why do we have to access its prototype? Why don't we just access the object and import a custom method called rid on it? Well, firstly, to find out more about prototypes and the prototype chain, please check out my JavaScript complete grandmaster course. The short answer is that if we put it directly onto the element object like this, it's not going to be attached to its constructor function. In other words, it's going to be specific to this instance of the element. But on other objects we create using the element constructor function that's not going to be there. And this is why I'm wanting to attach it to its prototype. Remember, the prototype is available to us from JavaScript. And it just means that other objects that are created from it will also show its prototype properties. Say kinda make sense. I hope so. So here we go, we're accessing as prototype. On there we defining a function called read and we're going to assign that. Like I said, it's going to be a function. So using JavaScript's function keyword. And in this function, what do we want to happen? Will we want to access the object that called this method? So we use the, this keyword. Again, if you don't understand what this is, please check out our JavaScript complete grandmaster course. So now we've got the object that called this method within want to access its style property and we want to change its color. Remember that? And we want to change the color to red. So there we go. That's our red prototype. Okay, we've attached now to this element object. Then the next thing I wanna do is I want to create a paragraph. So we know how to do this already. Let's create a variable called p. It started the root of our page, and let's access a method called create elements. And element we want to create here is p. Okay? Now what I wanna do, I didn't assign it equal sign. There we go. So now we've created our paragraph. What I wanna do now is let me actually attaches to the page again. To see this in action, I want to put our paragraph onto this document. How can we do that? Well, firstly, let's access our document and it's just replace everything you see on the screen with the word hi. So there we go. We've got the word hi. Now what I wanna do is I want to add content to a paragraph. Right now it's just going to be an empty tag. So I want to access our p.sit object and wonder then insert some text content. And let's just say this is a new paragraph element. Pretty simple. So far, so good. And as you remember from series one of this course, we've created this paragraph, but we haven't attached to anything. It's just floating around in space at this point. So right now what I wanna do is I want to add this to the DOM. So all we do here is we access our document body and we use a pin that child to pinned it to the body. And I'm wanting to pinned this paragraph. Cu We are almost done, I promise. The last thing we wanna do is we want to access this red function. And you'll notice on this P object, we've never defined a read function on it heavily. So do you think it'll work? We access our P and we try and execute this function called read. Do you think it away? Water? Now, let's hit return. And look how awesome. And this my dear students is DOM extinction. We've added our own custom method to this element object. Man, so you might be thinking at this point, this is awesome and I'm gonna do this all the time. But for reasons I'm going to discuss now, this isn't a good practice, can get very messy for reasons I'm gonna discuss. So without further ado, let's jump into the next lecture and look at this code in a bit more detail. 10. Are DOM extensions good or bad?: We've just done an example of DOM extinction together, ip, having fun. I hope you're learning a time, but I want to just talk about our code in a little bit more detail. So let me bring it back onto the screen. This is what we just did. Remember. We first assigned the read function to the element prototype. We then created our paragraph elements and name. We could invoke the function directly on it. Well, why does this code work? The reason that works is because the object referred to by element dot prototype, actually one of the objects in the prototype chain of this paragraph element that we've created. In other words, when this red function is executed on the paragraph element, the past is not going to find it directly on the paragraph. The function is going to be searched throughout the prototype chain until it's found on this element dot prototype object. Second, to make scenes it, as I alluded to in the previous lecture, they are problems with the DOM extinction approach. Well, what are some of these problems? Firstly, let's just get rid of all the noise. As I'm sure you'd agree with me. We have to be careful about way we attach the read function onto. For example, if we create a property, Let's just say we put that read property or a function on the prototype of the HTML paragraph element, not the element object. Remember we did that in our example. Let's say we did it on the HTML paragraph element. In that instance, we wouldn't be able to use this property on say, an anchor element. Let me show you what I mean. Let me call up some code here. And this is what we had, right? We put our read property on this prototype on element object. As I mentioned, what happens if we go and we do something similar, but now we put this property on the HTML paragraph element. We don't do it on the element directly now. And then instead of creating a paragraph, Let's create an anchor tag. And we try and execute this function, the property on the anchor tag. What's going to happen? As unsure, you've guessed array, we're gonna get thrown an error. Specifically, we're going to be told that that red is not a function defined on that anchor tag. Does this make sense? And think about why this happens. Remember, this is because the anchor elements prototype chain never includes an object referred to by the HTML paragraph element dot prototype. Instead, it's going to include an object that is referred to by the HTML anchor element dot prototype. And that's why in the previous example, we actually attached our method further up the prototype chain on that element object. So then why not just include all our extinctions on that element object? Well, creating a property on element of prototypal have similar problems. For example, it will not be available on all node types, but only those of type element. For example, what if we created a text node or a comment node, et cetera, et cetera. Okay, Clyde will then just keep working further up the prototype chain instead of attaching our newly created DOM exchange admitted to the element object. Why did we just do it to the node object? And yes, that's actually a very valid question. Why don't we just added on the very highest note? In fact, why don't we just add all our extinctions onto that object? Remember the capital O, the object, objects. Why don't we just do that? Well, this is what I want to talk about in the next lecture. There are other problems by using this DOM extinction. Keep motivated, grab a coffee and I'll see you in the next lecture. 11. The problems with DOM extensions: Being able to extend DOM elements through prototype objects sounds amazing. We're taking advantage of JavaScript prototypal nature. And scripting DOM becomes very object oriented and it's so tempting that even a few years ago, prototype JavaScript library made it in a central part of its architecture. But hang on to your horses. They are a lot of problems with implementing dominant extinctions as way. And I'm going to discuss why it's not quite the best idea. Well, you can see a few of the problems on the screen is just start with the first one. And we've kind of already looked at this. The first problem is we have to choose the right prototype. If we attach a property to the prototype of a DOM element, it can only be accessed by an object that has the same prototype as part of its chain, we sold us rights. If we add that read property to the element, the comic nerd won't have access to the raid property that takes the hardware and have access to the rape property, et cetra, et cetera. So that's the first problem with this approach. Secondly, the no rules. Remember, DOM objects or host objects has C, I've got a spelling error. They're not opposites objects on the topic of no rules. I just want to say one big problem with using all of these approaches to add properties emitters is that exposure of these DOM object prototypes is not guaranteed. Why is it not guaranteed? Well, because the DOM specification does not make it mandatory for vendors, okay, browsers to have a global element property that will become a prototype of all objects implementing it. This is not specified as not mandatory, and neither does it state that there should exist a global node property that is a prototype of all objects that implement this interface is you could argue that although they don't make it mandatory, most browsers do aloud. And it's kind of true. But when we start looking at Internet Explorer seven or Safari two examples, we can't do these kind of things we've seen. And you could argue, client, yes, but surely we can get around this whole extension object by just extending an object directly. For example, if we go and make a paragraph element, remember, P equals document or create element. Can't we just then add a property to their paragraph? Well, we can, but performance wise, it's not a good idea. It's very slow. But anyway, I want to go back to this host objects. What are the problems here? We'll DOM objects or host objects and hosts objects are the most difficult to work with. Hearst objects allowed to do things that no other object can even dream of doing. So we could say that extending DOM objects is kind of like walking in a minefield. By definition, we working with something that's allowed to behave in an unpredictable and completely erratic way. This is quickly look at an example. If we type document creates element p and we exist the offset parent method. This will not work in Internet Explorer. We'll get an error. That's just an example of Watson, a good idea and the no rules specifying how these should behave. The final thing I want to discuss is collisions. You got to think what it is we doing here whenever we start adding our own extensions to objects, we have to come up with a property name and our instance where our example we call it red. But what about afraid is already part of the DOM. Can we over writers doesn't have other knock-on effects with other parts of dominant code. Remember, HTML5 brings new methods and properties all the time. Who has said he have it? Those are some of the biggest problems I can think of. And just to summarize, my view on this whole topic is generally DOM extinctions on not a great idea. And this is true even if you only want your site to work on two browsers, you still going to have collision risks, those ones we just discussed. So then what is the solution? Will one solution is to use object rapids. And this is pretty much what jQuery has done from the very beginning. But anyway, this is a topic that's entirely beyond the scope of what I'm trying to get across here. I hope you've learned a lot about DOM extinctions. Hope you kinda get a feel as to why it's not necessarily the best idea. But anyway, stay motivated and I'll see you in the next lecture. 12. Events are not an isolated disturbance: All right, let's start talking about event bubbling. And by vain babbling, I'm just meaning the flow of each event through the DOM. Up until this point in the course, we've seen many ways to add listens to the DOM. The best way is using this add event listener method. And we all know how this works. But what we haven't yet discussed is quite an advanced topic of how events get fired. The most important thing to take away from this section is that any vein is not an isolated disturbance, just like a butterfly flapping its wings, then known as quake, a meteor strike or even a visit from Hulk. He thinks ripple effect, a bunch of elements that lie in a path. If y i, before we move on, the butterfly faked is just the idea that small things can have non-linear impacts on a more complex system. So when we say the butterfly fake, we kind of imagine a butterfly flapping its wings and causing a large typhoon. That Let's move on. I don't want to digress. Well, I want us to code something very, very simple. I want to have a very simple HTML document. I want to have a body element. And within the body, Let's have foreigners, three nested divs. And we can give the first div an idea of one, the secant of idea of two. And in the third nested element, Let's have two divs. Let's give the first div an ID of three a, and the second div an ID of three B. And within each of those divs, leads include a button. The first button we can give an idea of Button 1 and the second button we can give an ID of button too. As we can see, there's nothing really exciting going on with our code. And the HTML should look pretty straightforward. And by now, you should be able to map this out in the DOM tree. Remember we start with a window object, That's the king. Within that we've got our document object, then we've got the HTML object, and then we can start mapping it all out. We've got our body and then we've got those divs under the body. We've got a div with an ID of one, right? Within that, we've got another div with ID of two. Within that, we've got two divs with the IDs of 33 b. And of course, within each of those terms, we have a pattern with the corresponding IDs Qu. So here we go. This is the base that I want us to work with, such as Pause the video now before you move on, let us sink in and they let see what happens when we click one of those buttons. 13. Event bubbling vs capturing: Okay, let's look at what happens when you click a button. Remember we've got our HTML and we've met it out into a DOM tree. And this is way on investigation is going to begin in this DOM tree. And let's get rid of that HTML funnel just to remove the noise. And let's click on Button 1. What's going to happen? Well, from what we've learned in the course already, we know that a Nikki veins is going to be find. The interesting thing though that we haven't discussed is we exactly the click event is being fired from our click event, just like almost every other event does not originate at the element that we interacted with. That would be way too easy and would make far too much scenes. So in our case, that click event does not originate at the bottom with ID of Button 1. Instead, all the veins originate at drumroll. The page, which is the window object. So let's map this out. We know our tick event starts here at the window object. I know it's kind of weird, right, with clicking on the button, but the event actually doesn't start at the button. It starts on the window object. From this root Window Object, leave ink makes its way through the narrow part of the DOM. And that stops it, the element that triggered the event. In our case, it stops at this button with an ID of Button 1. And it's more generally known as the togas, the event target, if you will. So just remember that the most deeply nested element that calls the actual event, in this case, that button is called a target element. And this target element doesn't change throughout this whole bubbling process. As we've just seen in this diagram here, the path olivine takes is pretty gyrate, starts at the root and it goes all the way down to the event target. But along the way, it does kind of annoyingly notify every element along the path. So this means if a is an event handler associated with the element on the path that matches the even currently passing by that event handler will also get called doesn't stop. Once the event reaches the target, that doesn't stop. It's like one of those intergenic bunnies where he put batteries into the vein tube, keeps going by retracing steps and returning back to the root. And just like before, on his way up, every single element gets notified of this event. So this means that any event handlers present will get cold as well, as long as it's the same event. In our instance, the click event. This is kinda making sense. I know it seems a bit weird at first. One of the main things to note though, is that it doesn't met a way. And Aldon, we initiate an event. The event will always start at the root. It will travel down the DOM structure until it hits our event target. And then it's gonna go and travel back up to the root. And this entire journey is very formally define what I mean by that. Well, let's get rid of all the noise. And let's look at this. When it travels down. This is referred to as the event capturing phase. And when it travels up, and as you would probably have guessed, this is called the event bubbling phase. The more simple among us, including myself, just call it phase 1 and phase 2. It's just easier. So be aware you may see the proper name called event capturing, and you may see the term phase 1. Both can be used interchangeably. Okay, I think I've pulled a whole lot of information on you in this lecture. I want to stop here, but we've still got quite a lot to cover. In the next lecture, Let's start delving more into this. Hope you're having fun, stay motivated, and I'll see you in the next lecture. 14. How to listen during the capturing phase: All right, To remind you, we are talking about event bubbling. And remember, even babbling is just the flow of each event through the DOM. And we just saw on the previous lecture that we can kind of split this whole process into two phases. Phase 1, aka the capturing phase, is we, the event starts at the root and it works its way through the DOM all the way to the event target. That's phase one. We also looked at phase 2, AKA the bubbling phase. And rather intuitive, yeah, I guess this is way the event bubbles all the way back up to the root. We saw that all of the elements in any vanes Pause, are pretty lucky. While they lucky well because they have the good fortune of getting notified twice when every time and convene to the fired. This kind of sort of maybe a fixed the kobe, right, doesn't it? Because every time we listen for events, we have to now choose on which face we want to listen for our event. On. Do we listen to our event is It's fumbling down in the capture phase. What do we listen to our events as a climbs back up in the bubbling phase? Which phase to really listen to an event on? Well, my dear students, this is we, we've got another argument to our add event listener function. Remember the syntax. We add this estimate listener onto an element. Say we've got to click events. And then we've got a handler called click handler, which we haven't discussed yet, is that there is actually a third argument to this function. And this third argument specifies whether we want to listen for this event during the capture phase. In other words, an argument of true means that we want to listen to the infant during the capture phase. Does that kinda make sense? And if we don't have true, obviously the default end is false. And when we use inline event listeners or if we just specified to your arguments to the add event listener. The browser doesn't know anything about capturing and you code your event handlers are needed to run on the second phase, on the bubbling phase. If y i, they'll actually formally three phases. And then third phase is the target phase that we need vein has reached the actual element. But in practice, this is not handled separately. In fact, handlers on both the capturing and babbling phases trigger at that target phase as well. But anyway, and I've saved, you're probably wondering how this all works. So it has always, let's jump over to the text editor and let's start coding. 15. Bubbling vs capturing - example 1: All right, You know me, I love examples. So let's get cracking. All I want to do is create a very simple HTML page. I want to include two buttons. So let's do a button tag with ID of Button 1. And we can just call that button one. And we can just duplicate this. And of course this can be button too. That's pretty much what I wanna do. Very simple rights, and I want to include JavaScript. Let's start accessing the DOM. Let's just put on a live server here so we can see this in the browser as we're working. Let me just drag this across. Does this make sense? Here we got a button one and button two. Let's go back to our text editor and let's finish off this JavaScript. What I wanna do is I want to access Button 1 and honest to attach an event listener to it. And then I want to see what happens. So, but one, we know how to do this already. We access our document objects, a method called get element by ID. The ID of course is Button 1. Okay, great, But what I wanna do now, well, let's listen for the event during the capture phase and also listen for the event and the bubbling phase. First, let's do the capturing phase. So let's execute our handler in the capturing phase. How do we do that? Well, we just saw we access our button. We then implement the add event listener method. We want to listen for a click event. We then want to define a function called click handler. We haven't defined a deed, we will end. The third argument we have to provide is true, because now we want them to listen and execute our handler in the capturing phase. Realistic, exactly the same thing now. But now let's execute how handler in the bubbling phase, and this is the default. Again, we can access our button one. We add the event listener. We want to listen for a click event. We want to execute the click handler. But now we want to put false. And we don't have to do this. We can just put in two arguments. But I wanted to be explicit here because I want you to know what's happening behind the scenes. This is the default behavior. The last thing we have to do, of course, is define our handler. We've called it click handler. And let's just do something very simple is just console log. Or I have been clipped. Very, very simple economic scenes. So let's save, let's go to our browser and let's open a console. What's going to happen when we click button one? What would you expect to see? Well, before I show you the solution, let's go back to our code editor here. What's going to happen when that click event is fired on net button one. Remember what happens? It's going to start at the root of our document isn't at the window object and it's going to travel all the way down to that button one hand we net event hits button one. We've said, Yeah, we want to execute the click handler because we've specified true. But remember it doesn't stop. There, doesn't put us off after it gets to that bottom one. That even target that then has to travel all the way back up to the window object. And that is way our second event listener will get triggered because it's also listening for a click event which has already been fired. But this time it's going to listen and executes the handler. During the bubbling phase. Sowed expected console log to happen twice. One During the capturing phase and two during the bubbling phase. Well, let's see if onCreate. So let's click button one. Yea, and habit, I have been clicked, has been console logged twice to the screen. That's why the number 2, Zai Bu Gou. I hope this is making sense. Let's keep motivated because they still more we have to learn. 16. Bubbling vs capturing - example 2: All right, You know me by now how much I love examples and this one's going to be quite fun because what I'm wanting to do some wanting to display to us the entire capturing and babbling process. It's going to be really cool and we're going to be using the for of loop to do so. So what are we waiting for? Let's get cracking. What I wanna do is I want to create a simple HTML page. Now I just want to include styles just to make it look a bit more chunky. And I want to style our entire body. I'm wondering all our elements to have a margin of 10 pixels. And I want to put a border around each element. We create this, just give it a width of one pixel. Let's say it's a solid border and lists color of red. So very simple, nothing too fancy going on there. Let's now create our body element. Within our body, I want to create three nested elements. First, let's create a div. Then let's create a form. Let's get rid of the action here. We don't need an action. Then the last thing I wanna do is create a paragraph element. So there we go. Pretty simple, right? And if we go and look at this in the browser, this is what it's gonna look like. Let's start our live server. So there we go. We've got our div, we've got a form and got a paragraph elements. Obviously, if we click on this, nothing's gonna happen because we haven't added any event listener. So let's do that now. It's going to be pretty simple. Firstly, let's add our JavaScript here. And remember what I said. I want to use the for of loop. I don't want to manually add an event listener. And this is getting quite advanced now, but you'll see how simple it is once you get the hang of it. So the for of loop is a very simple function. Just bear in mind if you're not sure what it is, you can always check out my JavaScript compete grandmaster course to get a more intuitive feel is to help JavaScript itself works. But as you'll see, it is almost, almost just as basic as reading the function. So what we're wanting to do is we're running to loop through all of our elements on our page and put them in a variable. Let's define our variable as DOM element. And then the objects that we wanting to loop through is what? Well, that's going to be our query. Select them. Of course, the other ways we can do it, but I'm happy to use our query selector all. So what do we wanting to do is when Integrate Every single elements in our DOM. It is literally this simple. So just remember what it is we doing when we find all the elements in our DOM via the query selector, all a collection of return to us. And we just looping through that collection and every item in that collection is put into a variable here called DOM element. And now we want to add event listeners to all of these, don't worry. And we wanting to do it both for the capturing phase and for the bubbling phase. So let's first deal with the capturing phase. We're going to access our element that's been returned to us. In that item, we're going to add any event listener, a click event listener. And yes, now we could actually define a handler function, but I just want to execute it in line. So I'm just going to use the arrow syntax year. And what are we going to do? Let's just alert something to the screen. Let's use template literals. Again, if you don't know what all of this is, please check out my JavaScript's complete grandmaster course. If you do know what it is, great, you can follow along. As I mentioned, this is going to be for the capturing phase. And now I want to use the dollar and curly brace syntax to put in a variable. Here we're going to use our DOM element. And I want to get the tag name. For example, the HTML, the dove, the form, the p, whatever their tag name is. And in order to specify that we want this to listen on the capturing phase, what do we have to do? That's right, We have to provide a third argument to the add event listener method. And the third argument needs to be true. Now, the last thing we wanna do is do the exactly the same thing. But on the bubbling phase, access our element, we add the addEventListener method. Again, it's going to be a click event and we can use the arrow syntax. Once again. I just want to let you know that we don't actually have to put it within curly brackets like we did above. We can actually just execute our alert function directly by typing alert. Okay, I just want to show you different ways of doing things. Yeah, it's going to be during the bubbling phase. And I want to do exactly the same thing. I want to display its tag name. So here we go. Is that kind of making things? Is it intuitive? I hope so. Let's go to our browser and let's think about what would happen when we go and click this paragraph element. What do you think will happen? We'll take a step back. We do all events originate from it, originates from the window object from the root of our document, Southern Spain, during the capturing phase, for many alerts to be shown, right? In fact out expected to start from the HTML tag itself. And it's going to bubble down to the in the body in it's going to hit the dove in the form. And finally, a paragraph element and net is going to form the capturing phase, aka phase one. It doesn't stop there, does it? Because what happens next? That's right. It's going to bubble all the way back up to the root element. Hope it's making sense. So let's click this paragraph and let's see what happens. Well, there we go. We know we in the capturing phase. And it's HTML. That's exactly what we expected when we take a k are expected to be the body and that's what we have. How awesome. The next item that's going to capture, of course, is the div element. Then it's gonna do the form element. And then finally the paragraph element. As I mentioned, it doesn't stop here, does it? Because what's going to happen now when we click Okay, Well, that's right. It's going to start the bubbling phase. And the bubbling phase starts at the event target, in this case the p. And it's going to work its way all the way back up to the window root object. So I would expect the next alert to be the form. That's right. The next one would be the div. The next one will be the body. The next one will be the HTML. And then we are done. Man, this stuff really is awesome and it's very, very advanced. Now you understand the entire process that the stall more I want to talk about and I'll see you in the next lecture. 17. Why capturing vs bubbling matters: Or odd, we're coming along way. You understand the different phases, the capturing phase and the bubbling phase. But at this point you're probably wondering, why does all of this matter? Who cares? And this is a very valid question, especially if he had been working with the veins for a very long time and you haven't really come across this before. And this is the first time you've heard about these different phases. And I'll be honest, mostly it doesn't matter. In other words, our choice of listening to an event during the capturing or the bubbling phase is mostly irrelevant to what you and I are going to be doing 99 percent of the time. But when he is always the bat. With that said, they will come a time in your life where you'll need to distinguish between capturing and bubbling, especially when you're doing a bit of her fonts, things on your site, what I mean, will you most likely to have to distinguish between the two when you're dealing with nested menus that reveal submenus when you hover over them. You may also need this knowledge we need dealing with a third party library. With that library has its own event logic that you want to circumvent for your own custom behavior. And another scenario in which will become important to distinguish between babbling and capturing is when you want to override some built-in default browser. Here. Well, what's an example will, when you click on the scroll bar or get focused to TextField, et cetera, et cetera. When you want to start overriding all these things, you may want to listen to you only veins at a certain phase. So there you have it. I just wanted to provide this disclosure. Cool, okay, but now we know about babbling, we know about capturing. But what about if we don't want this to happen? What about when we click on a paragraph element? We only want that handler to fire. We don't want the entire bubbling process to happen. What do we do? Well, hold on to your horses. In the next lecture. 18. How to stop event capturing and bubbling: The last thing I want to talk about before grabbing another coffee is how to prevent our event from propagating, from babbling, from continuing. Sometimes we don't want our event to bubble all the way back up to the top. In other words, we want to kill our event, aka stop it from reaching the root and to end its life, we have the stop propagation method, which prevents our event from running through our DOM. Okay, sounds simple enough. So how does it work? Call up our DOM structure here. Remember this one? And remember we inserted a click listener on that bottom one. Will LET also insert a click listener on the div with ID of three a. And what do you think would happen if we put the stop propagation method on the div with ID of three a, what would happen? So let's say the user comes along any clicks button one. The first thing that happens is that the events dots at the root of our page, which is the window object. A Dane starts traveling down the DOM tree, stopping along each element. Along the way we know this, it's staying going to hit this div with three as its ID. And what's going to happen? Well, the veins is going to be stopped at this point. Why? Well, because we actually had stopped propagation being called on this handler. Does it make sense? Don't worry if it doesn't, I want to jump to the console right now and I want to code this up with you so you can see it in action. See now. 19. An example of using stopPropagation: Or I remember we had this code a few lectures back. We've just got a button one and button two. And we inserted an event listener, specifically a click event listener on each of these buttons. Actually, you know what, we don't even need button to, let me just get rid of button to this just going to confuse us. So we've just got Button 1 and we adding these event listeners on bottom one. But remember we wanted the click handler event to be fired during the capturing phase and during the bubbling phase. And then we had two consoles. Remember that? Now I want to mix things up, right? I want to actually add something onto, you know what TO, we've just got a button I actually want to create. Let's create a div with an ID of three. And then within this div, I want to insert this button. Does it make sense? So they may go, but now I want to mix things up as a SATA. I want to actually add a listener on this div elements. So let's do that. And listener on our div parents elements. The first thing we wanna do is we want to define that div in a variable. So let's define it as three. And of course we start with our document objects. We get element by ID. The ID here is three, a pretty straightforward drying. The next thing I wanna do is I want to add an event listener. So that's access. Add event listener. We are going to be listening for the click event. And then let's just call our own custom handler, quits it. And we want to listen to this and execute this handle when I want to do it during the capturing phase. So that's why we have to specify true as the third argument. And finally, we just have to define our handler. One. Very simple, very intuitive. And I want a console log something to the screen. Let's just say you have been stopped in your tracks. And the last thing I want to do is I want to grab our event itself and how do we do that? Well, we can define that in any variable. We once, remember I said that most developers at standard practice to just define it as E. So now we want to grab our actual event and we want to call this stop propagation method on it. I hope that's making sense. So let's think about what will happen when we go and click that button one. We know the event starts at the root, doesn't it? And it travels down each element. It's going to eventually hit the three elements, which also has the same click event listener method on it, that thing and execute that function. In this case, it's going to console log, you been stopped in your tracks. But then it's going to stop the propagation. It's going to stop this veined from traveling any further. So I wouldn't expect this click handler function to even be called. Let's see if we write. Let's go to our browser. Let's actually open the console. And let's click on this button. Are you ready? You've been stopped in your tracks and nothing else happens. And to prove that to you, Let's go to here and let's comment out the stop propagation. Let's go back to our console, clears and let's click it again. This will be the default behavior. It's going to show you been stopped in their tracks, but then it's going to continue down. It's going to hit that button. It's event handlers going to be called, and then it's going to be called again during the bubbling phase. So there you have it. I hope it's time to sink in. I hope it's starting to become more intuitive. And as you can see, it's not that difficult once we understand the basics, is it? Before we move on to the next lecture, I just want to mention something quickly and that is this stop of propagation method will stop the move of the veins traveling upwards, right? But on the existing current element, all other handlers will run. In other words, if an element has multiple event handlers on a single event, then even if one of them stops the babbling, all the other event handlers was to execute. And that may be absolutely fine a baby what you want. But if you actually want to stop the bubbling process and pervade handlers on the current element from running. These another closely related method called stop immediate propagation. I just wanted to kind of let you know that that exists. And this just means that often gets fired. No other hand is will execute even on these existing element. Great hope you having fun, and I'll see you in the next lecture. 20. Event delegation - intro: In one of the previous lectures, we saw that distinguishing between Katherine versus bundling is useful, but maybe it's not entirely crucial because 99 percent of the time, we don't really care. We happy just to listen to an event on the bubbling phase. But this doesn't mean that babbling itself is not crucial to understand. In fact, if you want to take your web development Korea Seriously, we need to understand babbling. And one of the major benefits of babbling is what's known in the industry as event delegation. What is event delegation and how does it fit in? Well, the idea is very simple. Say we have a lot of elements that we want to be handled in a very similar way. Option one is that we could attach event listeners to every single one of those elements. But as you can kind of get away, I'm getting with this that is very inefficient. I'm going to be having a lot of redundant and repetitive code. So instead of putting event handlers on every single element, all you need to do is choose a common ancestor, put whatever event handler you want on nets, and rely on bubbling. And what's pretty nifty is that remember that add event listener method. What it gives us when an event is fine, it gives us that event object. Remember that E? And on that E We can actually access the item mic triggered the event with its event target property. What am I talking about? Well, I think the best way is to look at a very final example where we have a lot of blocks and whatever blocking click on, I want to change that color. Very, very cool. And then I want you to try your hand at few challenges. So enjoy it and start realizing it. This is the major benefit when it comes to understanding babbling. Hope you had fun, I hope you got a coffee. You waste mine. Because mine. So I do have on end. Yeah. I'll see you in the next week to enjoy it. 21. Box challenge - intro: Welcome to this awesome challenge, or can't wait to get into it with you. But what is it all about? We'll, firstly, you can see we've got a table on our screen is a hitting on the table. And if I click on this hitting on the table, nothing happens. But what happens when I click on one of these numbers will just click on that number one. We can see it goes reading. Now when I go click on the heading of the table, around table, nothing happens that's limited on the number two. Now, as we can see, the color red, that background color on number one has disappeared. And now the number two block has a background color of red. So I know you might be thinking and Clyde, this is a super-simple example and you are 100 percent grade. But the lessons you're going to learn in this challenge of inhibition, very, very important. So give a thought as to how you can code this up. Remember one thing though, we want to rely on what we've learned about paddling. Remember, babbling is a very, very powerful technique and not many develop as truly appreciate the power of understanding public. I don't want you to add event listeners on every single one of these elements. I want you to add an event listener on the parent because you know that no matter where you click in the DOM, that click event is going to traverse up the Dom, Isn't that it's going to travel up, it's going to bubble all the way up at our root element. So with that in mind, give it a go, grab a coffee and just enjoy it. Have fun with these things, because that's what this is all about. It's about having fun. But along the way, learning very valuable information as well. So I'll see you in the next lecture. 22. Box challenge - building our HTML: Nothing like a good, good coffee. And this is going to be a really fun little exercise. Because as you saw, what we're going to have is we're going to have a lot of little square blocks. When we click on those blocks, we want the colors to change. And remember what it is we're trying to do. We're trying to utilize our knowledge on bubbling because yeast we could attach an individual event listener to every single block. That means opcode becomes very repetitive and they fall redundant. It's actually just not performance efficient. So now we're going to rely on the fact that no matter where we click, that event is going to bubble up. And it's always going to bubble up past the ultimate parent div, right? So we can just attach an event listener to their parent div, knowing that we've always got access to the event target itself. I know you might be a bit weirded out by oldest, but don't worry, we're going to get into it right now. You can see here we've got our text editor on the left. We've got our browser on the right, so we can actually see what a fix our code is having on the browser. So this specific lecture here, I want us to sit up our skeleton. And in the next lecture we'll start adding JavaScript and seeing this in action. So enjoy it and have fun. This is going to be a very informative lecture, audios. So the first thing we wanna do is we want to sit up our HTML. And you can see here I've got an index.html file and I've got a styles.css. So very simply, let's set up an HTML template and let's just start creating the meat of our sides. I'm going to wrap all of those grey blocks in a table. And this table is what's going to be the parents of everything else. And therefore, it's this table that we want to attach an event listener to. So I just want to give it an i D. And remember what we're learning about here. We learning about event delegation. So why not just call this the delegation table for lack of a better word. So they would go with what our table. And now what I wanna do is I want us to create a heading for our entire table. Let's add a heading with the th tag. And I don't know, we can just say, Hey, let's have it a bit bold. We can say delegation. Table, click to change color. So we save that. There we go. We can see it in our browser, but that's just the table heading. What we can do now is we can add another row. And in this row let's just include some dots are now. And I want to just bold. Cool at number one. So there we go is number 1. And let's have three columns. So there we go. There can be one, this can be two, and this can be, this formatting looks terrible. You can see the oneness to the left and the 23 are bunch to the riots. And if you just inspect this, you'll know exactly what's happening. It comes down to our hitting by the way. I'll show you why now, just expand this quickly. What's actually happening here. Zao hitting is taking up all the space in one cell. In other words in one column and it's stretchy net column, which is why this is happening. So what we actually want to do is this heading. We want to span across three columns, don't we? So I'll show you what I mean now, get back to how we had it. There we go. And with this hitting, we just want to colspan it in three columns. There we go. Now they're all evenly distributed. So there we go. That is literally our first row. I then want to have another row. And of course, for that can be five and that can be six. And you guessed it. Let's have another We can have 789. How does that look? It's starting to take shape brought. But now let's just go to our styles here quickly. Firstly, we need to include a head. And within the head section we can include a link to our CSS file. And we know it's called styles. We can go to our style sheet, of course it's empty now, but let's just dial this table so it looks a bit more funky. So how should we start our table will firstly, let's grab our table and we can grab it by using its ID, which we called delegation table. Remember? So we've got our table. The next thing we wanna do is we want to style each cell, each daughter cell in our table. So we can just dial the td tag. And here we go. We can define the width of each cell, maybe a 150 pixels. It's looking better. And we can do the same with height. Let's do maybe a 100 pixels would starting to look good. And we can take the line to the center. And let's give it a nice light background. So these are quick style. He has our HTML and now I want you to try and think about how we can edit the intestines to this. Remember what we wanna do when we click on a number, we want its background color to change to read. So pause the video here, think about it and I'll see you in continue in the next lecture. 23. Box challenge - solution: Okay, This is exactly where we left off. Remember we finished our HTML and we've got these cool little blocks, bad, of course, as you know, if we click on these blocks, nothing happens and this is what I want us to do right now. So let's get into it. What is the first step we need to do? Well, let's ride. We need to include a script tag directly. Script tag. And let's build this slowly in steps. Okay, so remember what we wanting to do. We wanting to rely on the bubbling effect, the fact that events bubble up through the DOM. So with that said, the first thing we wanna do is we want to attach an event listener to our parent element, which in this case is the table. So here we want to define a variable and its call it table. And we can get this table by accessing an advisor that get element by ID method. We know this, we've been through this many, many times and its id is delegation table. Let's just check that is the ID delegation table. That's right. What's cool about that text editors? If a highlighted we can see it's exactly the same spilling, loads it, it's going to work, put it that way. So there we go. We've got our table, and now we want to attach an event listener. So touch and event listener. So we access our table object. We then access a method called add event listener. Again, we know this. We want to listen for a click event. And then we want to define our custom event handler function. And it's just call it change color because that's exactly what we're wanting to do. So there we go. How cool is this? We've already started doing it. And you can see when we do it piecemeal, it's not that difficult. The next step is, of course, is we need to define this changeColor function. And what are we doing here? Remember what's going to happen now, when we click on any single one of those cells within the table, the veins going to bubble to the top right. And we can prove it does. If we console log, something has been clicked and we got our browser, we access the console. Just make this a bit bigger. Faculty me make it full screen. Let's access our console. And now let's click on, say the number one, something's been clicked. The number five, again, something's been clicked. Her height. How awesome this goal. But let's continue. Let's go back to our text editor. Let's make this full size now. And now we can start getting into the nitty-gritty, right? Because right now we know that something's been clicked, but we don't know what has been clicked. And remember, with this addEventListener method, weekend given an actual object and event object. And in order to access that object, we have to put it inside a variable, as I mentioned previously in the course, most commonly, we use the letter E. Now we've got this event and we can actually just define it in another variable. Let's just say late targets be the event togas. And then to prove it to you, we can console log this target out. They will know exactly where this event came from. Let's go back to our browser. Let's clear the console and let's click on this first one. Target is not defined. What have I done wrong? This is called terrorists should be target. Uga. Simple spilling error is go back to our browser. That's clear, this console and let's click on this first one. And there we go. We're literally picking up this td element. How awesome is that strong one? So we know now we can access the actual item that is triggered that event. So there we go. Let's remove that console. What you might think we have to do now is change the color. But now how do we change the color? Well, there are a few ways we can do it. The easiest way I can think of is to define a clause and then just add that close to that item that has been clicked. Let's go to our style sheet quickly. I'll show you what I mean. And what I wanna do is I want to again access our delegation table. And now this time what I wanna do is I want to add our own custom class to each td tag rights. And I want to call that cause, I don't know highlight because that's what we're wanting to do. We wanting to highlight the cell a certain color. And of course, what we're wanting to do here is we simply want to change its background color to red. That's all we wanted to do. So if we go back here to our index, awesome, So we've got our class of highlight, which we know we want to add that clause to whatever element trigger the event. How do we add a clause? Well, it's very simple. We can access our target. The item that trigger deviant. The Dean has a object called class list. Object is a method called add in. It's really that simple. We're just adding a class to this element. And the class we want to add, of course, is highlight. Let's save this and go to our browser. This is going to be one major problem with what we've just done. So let me click on number one, for example. Changes to read. But what is the problem? Can you foresee a big problem here? Well, that's right. If we go and click on another cell, what's going to happen? Let's write that solves gonna go read, but the number one original cell would ticked on, doesn't change. It's still stays red. So there's a slight problem with our code which I want to fix now. We can go back to our code here. I want to delete adding a class last year and I'll show you why in a second. What I wanna do right now is I wanted to find our own custom function, and you'll see why a bit later. And let's just call this function highlight. And we want to highlight this target, right? So the next step we're going to have to do is we're going to have to define a function called Highlight. And it's going to take a node. In this case, it's actually going to take that element, the target element. And this is kind of way I want us to regulate what item is currently clicked versus the previous declared. So let me explain. At the very beginning of our script, Let's just define an empty variable and let's call this variable selected element. And initially let's assign it to a value of null. So what's really cool is that when we start executing this highlight function, we can now introduce an if statement. And what does this if statement going to contain? Well, let's think about what it is we want to do when we click on one of those TD cells, we want to then define a variable that's assigned to that cell. And then next time some things Dan effect variable has a value. We then want to remove their class from the head variable. I know it sounds weird, but you're gonna see exactly how this works now. So all I'm wanting to do is we wanting to say if selected element is not equal to null, meaning we've actually previously selected an element. What do we wanna do? Well, we want to take that selected element, we want to access its claws list method. Remember that? But this time we don't want to add Dewey. We want to remove that clause called highlights. So now this will remove at previously selected element Xj kinda making scenes or R, that's all good and well, but now what I wanna do is we need to assign the new item we've clicked on to the select element variable. Assign the new td element. We've clicked on to the select element variable. And of course, this first if statement is getting rid of the previously selected td elements. Highlight class, is that kinda making saints? So we've got rid of the previous one. Now we want him to assign the new td element to this variable. So how do we do that? We'll very simple. We access our selected element. And of course we assign that to the value of node. And then of course what we want introduce running to access the selected element, its class list method. And now we wanting to add a class called highlight to the newly selected item. Kinda making sense. I hope so, I really hope so. I'm listless. Go to the browser quickly, see how we go. Let's clear the console and click on number one. So there we go. It's red. Let's click on number 2. Yeah. Wow. This is amazing. Right? Click on number 1 again. Perhaps if you're really wanting to become a true grandma sterner stuff, you'll notice this isn't quite perfect. Why? Well, for a few reasons. One is what happens if we click on this heading of the table? Well, the guy we can see the heating of the table removes the color on the td element, sets a problem, right? And it's just refresh this. Let's click on one. What happens if I click on the gap? Yeah. In other words, the margins and paddings between itself. Well, the same thing's going to happen if the user accidentally does that, the color disappears. And that's not what we want. We only want the color to disappear when you click on another td element, a table daughter element, vaccines. So there's still something we have to do in order to kind of finish this off and perfect it was the video now and try and figure it out. That really is a quick fix. But it's a bit of a nuance. That's quite tricky. 24. What is the classList API? : Before we move on, I just want to clarify something that you may be wondering about. And that is what is this class list property if we had to exist? Well, let me just say that the class list is an API, and this API returns a live DOM token list. And what do I mean by an API will just remain the deck when we working in the browser. The browser itself provides us with a lot of different APIs. We've been through this previously. One of these APIs is cold, this class list and other APIs web sockets. We've also got the veins API, eccentric cetera. This is just one of many. And what does this clause lists allow us to do? Well, it gives us an easy way to grab all the tosses of a particular HTML element. And I'm sure you can guess already how useful this will be. For example, we can use this property to add, remove, and toggle CSS classes on an element in real time. And it has been around for quite a while. In fact, it was introduced by the HTML5 specification. And the really cool thing is we've got a lot of methods available to us on this class list API. We've got add, remove contains total item links to string and value. We're not going to be using all of these in the course, but we're going to be using the most popular ones. We're gonna be using add, remove, and even toggle. This EKG kinda making scenes. You may be wondering though, what is this DOM token lists? What is that all about? Well, this returns a drumroll. Pretty obvious routes. I'm sure you guessed that. It's a special kind of list. And it's a list that gives us all of the methods we've just seen in the previous slide. Remember, Add, Remove, toggle, et cetera, et cetera. And you'll probably only ever encounter the DOM token list with this class list API. So there we go. I just wanted to quickly give you a rundown of what does Clause listed property was. Hope you're learning a ton and I'll see you in the next challenge. 25. Box challenge - perfecting our solution: Did you figure it out? Don't worry if you didn't. That's not what's important. The important thing is you gave it some thought and you gave it a go. Let's go to our text editor here. And how can we deal with it? Well, we gotta go back to the source. Remember the highlight function, we only want that to happen. What we've clicked on is a TD element. Everything else. We actually want nothing to happen. If the user goes and clicks on the hitting of the table, we want nothing to happen. So we know because of that reason, we need to kind of have a gatekeeper, net gatekeeper can be this very first function, this changeColor function. So what we don't want to do is call this highlight target function immediately. We need an if statement. Don't worry. Let's start with an if statement. And if you're not sure how the if statement works, please check out my JavaScript complete grandmaster course. It really is awesome. But anyway, for those of you understand what it is, great, you'll be able to follow along. What is the first thing we can test for that? Again, the many ways to skin a cat when it comes to programming. This just deal with the situation where the target element with Tiktok does not equal to the td element. So what we can say then is that the target tag name, right, does not equal TD. In that case. We want to do nothing. And we can just execute a return statement that will in effect, tell the JavaScript parser to exit this whole if execution. That's all we doing. But then of course we want to deal with the situation way. That tag name is Td. So the mean to the simple else statement. And of course here we know that the element we've clicked on is a TD element. And in that case you're a 100 percent, right. This is where we want to execute a highlight function and pass in the target as its argument. Crew, we have done an incredible amount or hope it's all making sense. Let's go back to our browser. Clear the console, Let's click on one. Just click on five, get all working. Now let's click on the header. Nothing happens. Let's click in between these cells. Nothing happens. So we've literally got a perfect little table. How awesome the end to Herbie having fun. I hope you've learned a lot in this lecture. And if we go back to the code, yeah, Just take your time, go through it, understand step-by-step what it is we've done very quickly. All we've done is we've obviously defined our HTML at the very top. We've been to the styles.css file, which styles I'll table very nicely. And then at the bottom we've got our JavaScript all enclosed within a script tag. And within the script tag we started off by defining a variable called selected element. And remember why we did this. We did this so that we can keep track of which item with currently selected on and when we select a new element, we went to remove that clause of highlights on the previous element we selected. Why? Initially we just define an empty variable. And that variable kind of helps us keep track of which item is currently selected. Within grab our table, we add an event listener to that table and we utilize event bubbling whenever a click event gets bubbled to that table, this changeColor function is gonna get executed. We check whether that target element, the element that fired the click event. We check whether that is a TD element. And if it is, we execute a function called that function highlighting checks the selected element. And if it's not null, it removes that class name. And after that if statement is executed within assign the new node with clicked on to selected element, and then we add a class of highlight to it. Today we have it seriously Walden, you've come so far, you've done so well. And now I want you to try your hand at a few challenges. I think you yeah, I think at that point right now, you've done an incredible amount seriously, lucky need also celebrate these things. Sorry, I'll get the music out. And dance little. Relax and enjoy. Grab a coffee. And I'll see you in the next lecture. 26. Quote challenge - intro: Welcome to yet another challenge. I hope you're having fun. In fact, I love these things and I love putting them together and going through them with you really is fascinating. I'm just enjoy it, but enough, blubber, blubber. What is this challenge all about? Well, I'm sure you can probably guess it, but here we've got three general quotes in their own blog. And when you click on the little x in the right-hand corner, what happens? That's right. She gone. It removes it entirely. It's then annihilate. Anyway, you get the point when the user clicks on that. That entire quotes should disappear. Image just refreshes would be when the user clicks on the actual quote, nothing should happen there. Only when the user clicks on that button. Just thought up ancient it. So give it a go. In the next lecture, I'm going to code the HTML with you. If you don't want to code HTML, that's okay. I haven't created the file, but seriously, it's the best way to learn. So regardless of whether you're going to code the HTML with me and I will see you in the solutions video as well where we code up the JavaScript, manipulate the DOM, utilize event delegation remainder on knowledge of bubbling. We don't want to be putting event listeners on each one of these points. We want to put it on a parent's elements. Okay, so just bear that in mind. Anyway, enjoy a grab a coffee, and I'll see you in the next lecture. 27. Quote challenge - building our HTML: Awesome. We're getting into the next challenge. And as always, the know-how work when I write the HTML with you because I think it's base to learn that way. I really do and I encourage you to follow along. But if you don't want to follow along and you really are a monster at HTML and all those kind of things. Don't panic. I've included a link to the HTML in this lecture. So you can just pick up from there. But if you came to code alongside me, great, Let's get into it right now you can see up on my blank Visual Studio code and the browser on the rights. And all I have are two files, an index file and a styles. That's it. Where do we start? As always, I want to start with a simple HTML file. And before we forget this, just include our style sheet. Right now. There we go. I'll style sheet is all connected and they start rotting body. Remember what we tried to do? We are trying to utilize our knowledge of bubbling. Okay, So I want to wrap all of code within, call it a delegation of, Let's create a div with ID of delegation within this div delegation box, this all encompassing one, the parent development. I want to have off quotes and each quote kind of looks the same. Remember we've got a heading, we bought a certain background. We've got the top border. And because they are kind of repetitive, what we should do is create a clause and rent each port within another development with a certain clause. So with that said, let's create a div and let's have a class of box because that's what we are doing. We putting each quotes in its own box. At this point, remember what we've done. We've got our box and within each box we want to quotes and remember what each quite head. So a simple, it had a heading and then it had to actually takes. And then of course we've got the close button on the top right. So firstly, let's do the hitting this just to an H3 tag because I don't want it that big. And hitting can be cold out on a hip, hip, hip. Here we go. And they may need the actual quit done doing. So, the quote can just be in a normal paragraph tag. We've got our paragraph and instead of typing it out of just save time, I've actually saved all the quotes and another screens delicious copy and paste it. Yeah. These are quite as a hippopotamus. A hippopotamus or just a really cool up optimise. For a brilliant, brilliant, that is a typical dad joke, isn't it? Anyway, we've got our heading, we've got acquired, and then we need the close button. Don't want you to create a button tag with a class of vicious cool, it removed. And we just want to include little XD. So we know that that is a button. We click on that button and we wanted to move. Don't worry about the styling of this. Now, we're gonna get into that in our style sheet. This is just sitting out the HTML. So there we go. Idea is offers quote, all we have to do now is copy. This does flies directly Save and they are all requests. How somebody was this, this just change. Of course, each one of these headings, this hitting can be cold. Keep going. And let me grab the text on my other screen. Yeah, equity. And this quote was from Winston Churchill. And then finally, let's get onto lost one. And we can say, pay attention. Again, let me just copy and paste this from my other screen here just to save us time. There we go. Cool hackles this. So these are HTML. The last thing I wanna do to limit just scroll to the top here is spice this up a little bit by applying cool stylistic was done Talk style sheets and makes thought jazzing this up. The first thing I want to do is on a grab our body, okay, and I want to style everything on Next, and let's deal with margin first. Let's just say we want a margin of 10 pixels and we want everything aligned to the center. We can then define a width of 450 pixels. How's that looking? And looking good droughts sainted. It's got a mass width to us. And then the fonts is just average. So let's just put font-family. Korean unit. That's fun. David guy, that looks quite cool. It looks like it's a proper quote. Stats up buddy, they start getting more specific right now. And let's stop working at the very top. Let's talk working with our h3 tag. The, let's just get rid of the margin. And we can have a bit of padding at the bottom. So that's good. Padding bottom. I don't know. 0.3 m truck. Yeah, That's okay. So that's how H3. Now, I want to start working with our paragraph. Let's get up parent or off again, this remove margin. And again, I want to affect the padding bottom or padding bottom. And unknowns. 0.5 Aim bit more, maybe 0.8 to him. I think that looks good. Let's are H3 and our paragraph. The next thing I want to style is this remove button. Should we do that? Actually, you know what, before I do the remove button, let me actually style a box because then you'll see kind of way we positioning that button or be easier to see. So all we wanna do is we want to grab the class name of box. Remember, yeah, we can apply a background color of this, just say purple, but I'm going to change it now. So let's just hover over this. This is really something cool about the text editor. And we can literary style it the way we like. How does that look? Let's put pink, isn't it? Maybe we should do it, you know, I can me do it a nice blue color. How's that? Yeah, That's cool. I like that. And we make it a bit more transparent. There you go. I like that. Let's add some padding. Yep, it looks better. And it's already starting to look cool with right now you can see that one does lie unquote throws it into the other. So let's just separate it by having really cool border. In fact, I want to have just a board at the top so we can go border top. A two pixels, solid blue. How does that look? Yeah, I'm the netbooks or at least now you can distinguish one quote from the other. And now the last thing I wanna do is just scroll down. Yeah, But as I wanted to style that close button, right then we gave it a class of remove. Remember that if I got our HTML file and we scroll to each of these buttons, you can see each button has a clause or remove. So that's what we're doing here. We're gonna have faked IT staff will firstly, I want the position to be an absolute position because remember, we want to place this at the top rights of each quote, aka of each div with a class of box. So we want its position to be an absolute position. But we're going to have a slight problem with this that I'll show you now. So we've got an absolute position, which is cool now we need to move it around if we affect its top positioning to 0, you can see that they are stacking on top of each other. So although we wanted to be an absolute positioning, we want it to always be relative to its parent. And the parent div is this Boston. And in order to do that, we have to go into this box does and then the box stuff, we can have a position of relative. There we go. Now, each Remove button will be positioned relative to its parent. Does that kinda making sense? So that's why we did that, you know, it we should have a comment. Yeah. And the comment can be we want each button to be placed relative to its parent. That's why we're doing this. So there we go. That makes a lot of scenes. And of course we want that button push to the right. In fact, maybe we can have a team pixels from the right. How does that look? Starting to look good, right? What else can we do? We can remove the border. Okay. So border none. How does that look? Yeah, my name is looking. Okay. What else can we do? We can add a background. Let's have transparent. We don't want that gray doesn't look nice. You guys are starting to look better hand, the color, of course, can be dark red. As o'clock. It's better. The other thing we can do is you can see if we hover over with our mouse, doesn't change that funny hand symbol. So of course what we can do is we can affect its cursor property and make that a pointer is now if we hover over these little hand and it's a bit small. So let's make it a bit bigger. Font size. Let's make it one m. That's a bit better, and I think that's fine. I think this looks great. Obviously, we can spend a lot more time making it more beautiful. But for the purposes of this lecture, we've done enough. We've got our three quotes. And of course, I think obvious what I want you to try and do. When you click on that to cross the close button. I want that quote to disappear. So we've got our HTML. Remember what we did? We defined an overall div element, an active element. We're going to utilize rots because we've learned about babbling. And this is going to be the one that listens for our sticky veins on that close button. Does that make sense? Cool, So give it a go. And in the next lecture, I'll code up the solution with you. Hugged having fun him say end. And I'll see you in the next lecture. 28. Quote challenge - solution: Woo hoo. I hope you had fun and I hope you're learning and I hope he gave it a go because that's the most important thing. But yeah, we all well know, wanna do now is I want to add our JavaScripts, want to add that event listener, and I want us to utilize event bubbling. Let me expand out takes editor right now. And this starting tooting our script tag. You're going to be amazed at how simple the solution is, by the way, really isn't that difficult? What's the first thing we have to do? Well, let's rock. We want to attach our event listener to something, right? So let's say late delegation. The assigned to the value of our actual div with ID of delegation, because that's the one we wanted to listen to what I veins on, right. We don't want to be attaching a faintness distribute box that's too cumbersome and its performance inefficient. We want to be true grandmasters encoding domain. So we start with our document object. On that document object, we know this already. There's a method called get element by ID. And of course the ID we want FH is delegation. I think that's what we call it ID delegation. And that's right. So there we go. That's the first step. The second step is we want to attach our event listener. So we grabbed out of delegation. We exist now a method directly on this called add event listener. We want to listen full click events. And when they click event is fired, we want to execute our handler and the handler removed for lack of a better word. Course, now we have to define our function that we've named removed. And now you might think it's tricky, but it's not that tricky. What do we do now? Will a lot of coding comes through trial and error. So what I can do is I can code something up that weren't quite work, but it will get us halfway. The first thing we wanna do is we want to access the vein targets, don't we? We want to find out ways that this event come from. And in order to that, we have to access the actual event object that's given to us in this callback function. How do we do that? Well, as you know about now, we put it into a variable and we typically call it variable e. And in order to access our targets, we can just define a variable called target, and we access our event object and we get a property called target on it. This we know. Now what we wanna do is we want to remove not only the actual target, but we wanting to remove the parent node, the parent element. Remember how we structured our code? Let me just scroll up here. Each quote as wrecked and what? It's right. It's wrapped in its own div element with a class of bugs. So we could say, if we click inside a quote, we want to remove its parent elements. And of course, if you remove its own parent element, that's removing all the children as well. With that said, you might be thinking the easiest way Clive is just to grab those targets axis, its parent element via the parent element method. In DOM pot one of the series, we go into a lot of detail into parent elements and how to traverse the DOM. This is specific to one reason why it becomes very useful. And on this, we want to access a method called remove. So let's save this and go to our browser. Let's expand our browser. And now let's click on keep going. Oh man, it's removed it but it shouldn't have right? Because we should only remove it when we click on that. Okay, So it's kind of Hoff working and this is what I said before when you could just try to give it a go. And as you'll see, you know, we can keep improving on our code as we go along. See me refresh the page and it's got back to our text editor. So how do we deal with the fact that we only want to remove the parent element when that little aches, that close button is clicked. One way we can do it is to use the if statement. And the many ways we can utilize the if statement as well. I'm just going to start by saying if the target, remember the target is the thing, that element that has fired the tick event. If that target, if its class name is not equal to remove. Remember because all our buttons have a class of removed. If that element we've ticked on doesn't have the class of removal. We know it's not the baton. So in that case we wanna do nothing. We just want to exit out of this if statement. Else. This is the cache block of code. We know that the element we ticked on does have a class name of remove, in which case that means it is the button. So in that instance, we do want to execute the remove method on its parent element. Does that make sense? I hope so. Let's refresh. And now if I click on a, hitting all the quotes, nothing happens. But if we hover over one of these flows buttons and we click on that, it's gone. How awesome. So there we go. I hope you have a lot of fun, unhappy following me. I hope you are understanding how we sitting up the code and how we're utilizing the beings delegation via bubbling. It really is interesting and you becoming a master at this banal. While that 29. List challenge - intro: I love this stuff serious, so much fun. And that's why I keep putting challenges and practical examples. Ai enjoy it and be I think you'd gonna get tons out of it. Remember, this course is equipping you to learn how to efficiently code and these laws. Few challenges including this one, is utilizing the concept of event bubbling. And we do so by event delegation. Remember a vein delegation and even bubbling work hand in hand. They very closely related. And the more you practice this, the bid at Coda you're going to become. But anyway, enough of this, what is this challenge all about? Well, as you can see, we've got very simple looking text on the screen, HTML. And I deliberately didn't want to spend a lot of Thomas CSAs. I just wanted you to learn this concept and then we'll move on as I'm sure you can maybe already guess. All we wanting to do collects items and sharp items when you click on them. If we take on red meats, man, that's gone. If we click on other, that's gone. If we click on vegetables, the entire list has gone. For click on it again, it shows up. If we click on yucky ones at collapses, if we click on meets that collapses. So there you go. I think you get the point. And remember that we are wanting to utilize event delegation. So make sure you read everything in an elements and listen for a click event on that element because you know, it's going to bubble up. So give it a go. I hope you have fun. Stay motivated and I'll see you in the very next lecture. 30. List challenge - building our HTML: Or odd. So I'm going to stop going very quickly through this because you're getting good. So let's start creating our HTML quickly and efficiently. Here we go. We've got our body. What I wanna do, well, we need to create or hers list tags rots and I know it's going to look a bit cumbersome, but we'll get there together. So let's get cracking. Remember, we wanting to utilize event bubbling. And in order to do that, we have to create kind of a parent elements that captures all the events. So let's do that. We can call it the UL tag and that can have an ID of food. And as we know, all unordered lists have to have a list item within it. So I'll first list item can be meats. And I'll second list item can be under no vegetables. There we go. And if we save that and refresh on our page, we can see we've got meats and vegetables. Pretty simple. Now remember, we wanted to create a whole kind of tree structure of lists and all that. So within this meets a lie, I actually want to create another unordered list. And remember they wanted to attain, break it down even further into call it red meats and other. So in order to do that, we can just create another list item. This can be red meats. And of course we can have one here saying save that and we can stop. We can see it that's taking full and it's taking shape and what's next? Well, remember that when a user clicks on rate and eats, we want another anti and less structure to display. So within List meets we want another UL tag and we can have alla, list items of red meats. So we can write beef, lamb, and POLQA. Does that look now you go and we pretty much want to do exactly the same thing for other. We went to an unordered list and within that we won three list items. Either can be fish, chicken, and let's say Turkey. Cool, I know it gets kinda weird draw timing, all these unordered lists and lists. But let's move on. We'll almost, almost done. We can actually pretty much do the same thing with base tools. Remain below the face to moles. We want also to sub-headings. We can have an unordered list and the two subheadings we want yummy ones and we can have the lucky ones. And these are just to Hamline opinion by the way, which ones are yummy and which one's aunts within yummy, of course we need another UL tag and the, we can have our actual list items. Well, what are some really yummy vegetables? Will I love potatoes? And I love asparagus. What else? Tell a lie. I like peas. Now, it's time to take shape. And then of course on the yucky ones, we wanna do exactly the same thing. We want an unordered list with list items under each one. Firstly, I don't really like brussel sprouts, although I was with a shaped ones. And he made the most delicious process. And I haven't had those again. So I'm just gonna put Brussels sprouts. No, thank you. Just put two others. Let's put kale just for argument sake. And I don't like mushrooms for some reason. Mushroom is available. Not sure. It's just put it here. So there we go. Here's our general setup. We've got our list items, we've got our lists. I'll unordered lists. And we've got our ultimate UL tag with an id of food. And it's going to be what listens for all our WikiLeaks. There we go. Take a deep breath. We've done our HTML. But of course now when we click on all of these, nothing happens. What I want you to think about, how would you collect it? It's quite a tricky one. I don't want you to worry about the styling of these list items in an unordered list. Don't worry about that. Think about what it is we're trying to learn which under learned about event bubbling, event delegation and how we can work with these kind of concepts to create It's very cool effects and create a better user experience. So give it a think, have fun. And in the next picture will cut up the solution together. Let's see now. 31. List challenge - solution: Who who did you give it a go? I hope so. But anyway, here we are. I'm not going to keep you. I'm just going to go through the solution very, very quickly and explain every step along the way. So how do we do this? It can be a bit tricky, but you know how to, it's going to surprise you how simple the solution really is. See me scroll down here. The first step, of course, is we have to include our script tag. We notice, and we wanting to utilize event bubbling and even delegation. And what that means is we want to listen to our veins on a certain section and our page. But we want to listen to that event from one element, right? Because we know against Babylon. And that is exactly why we wrapped everything in this unordered list element with an ID of food. So the first step is, as you guessed it, we need to access this whole item. And we do so by using document get element by ID, which we gave an ID of food. And as I'm sure you've already guessed, the next step is to access this variable we've just created. We then want to execute a method on it called addEventListener. We listening for a click event, right? And when that event is fired, what do we wanna do? Well, we want to either show or hide something rot. So in order to dance, handout and let's call it show or hide. And the final step is to define this handler function. We do so by using JavaScript function keyword, and we've called it Show Hide. And here we go. The meat and hearts of our code is in this function. Okay, so what do we want to happen? Let's scroll up and Nakoda. Let's have a look at this meat would, when we click on meets, what happens. We'll have a look at its surrounding. We know and when I click on meets, so instead we went red meats and other to collapse. Don't read. The first thing I can notice though, This meeting is on an LI tag. Says the first thing. The second thing is, yes, we can collapse each one of those allies beneath it, but it's more efficient to just collapse the UL tag, will the UL element within that LI tag? Because I make sense. Okay, cool. What about red meats will read meets us the same thing when we click on that and notice that it's on an ally tag and that we can just collapse the UL element underneath it. And as you scroll down, you'll notice that every other element works in the same way and has to be on an ally tag. And then we have to find its elements beneath it and then hide that. So how do we do this? Well, you'll see it's not that difficult. The first thing is always is we have to get the target, we have to get the automatic should trigger the event. So let's define a variable called target. Let's access our event object. And remember we do so by putting it in a variable called e. And it has a property called tolerance. So there we go. We've got our vein target. The first check I wanna do is I want to check whether it's an ally tech. And we've done this before, so you know how to do it, but we can access our target. It has a tag name property. And we want that tag name to be an ally tag, right? And if that happens, we know that then we can execute our handler function Qu. And what do we want our handler function to do? Well, remember we want our handler function to hide or show you our element. So let's define another variable and let's call that the UL, put the URL we want to either show or hide on. Oh, it's horrible name, but it's just what I thought of now. And let's now assign that to two. Which value? Well, let's access our target. Our target is going to be if we tick yucky ones, it's going to be this LI tag Rochester. We want to access that and then we want to query, select all its elements beneath it, right? So we can access it targets. We can then access the method query selector, query selector, and we want to get all the UL elements. So far so good. But if we now just work with that variable, what happens when we click on, say this, I'll I take kale. Well, you'd agree with me that, that you all doesn't exist within that LI tag. So it'll be undefined. So the loss check we have to do is we just have to say if it exists, then if it exists, we know that it won't be undefined. So we can just say if it exists and how we can execute our code. What do we want it to do? How do we hide that you, I'll take, well the many ways to skin a cat when it comes to programming. But why don't we just add a class? And that class can have one property in its display property, which can just be saved to hide. And we can just toggle that on and off. Let me show you what I mean. So let's go to our HTML at the top. That's included a head section within that, a style element. And let's just add a class called Hyde. And as I said, it has a display property and we can just have a value of none. Today we go, we've defined a new clause. So at the very bottom, we know that everything has happened according to plan. We can access our new variable. We can then access its claws list property. Remember, we've been doing this in previous lectures, but now there's another method called toggle, and it's very handy and its name gives it away that literally toggles, adding and removing a class. And the class we want to toggle, of course, is that Haida class crew. Let's just check if this works. Let's click on meets. While these troubles take on leaks again, let's click on other. Let's open up vegetables. Let's click Anya key ones. Yummy one's red meats, meats, vegetables. Rule. This is fun. And I hope you learned a ton in this lecture seriously. And sometimes just take a step back and go through it step by step. Remember what we did? Go back to our code here we define our event delegation being on this huge owl element right at the top, because we know only veins will not click events have in a bubble up through it. We then wanted to listen to the ticky veins. And finally, when that event happens, we wanted to execute a function and we just call that function show or hide. The Show, Hide just checks that the item we've clicked on is in fact on an LI tag because we don't want things hiding and displaying when we click randomly on a page, has to be OK. We checked that it had to be an ally tag. We then had to check that it does in fact have this huge owl elements beneath it. And if it does, we want to toggle that class on an oath, that class of HIV. So there we have it. Hope inserting at the time, hope you're having fun. And I'll see you in the next lecture. 32. Class Outro: Well done, my dear students. Well done. You've just finished this awesome class about very advanced concepts. I might add node hierarchy or object hierarchy, event capturing any vein public it is then if you really are beginning to master the donor, and I must say, this entire course series has led to this moment because in the very next class, in the last class of the series, I want us to apply all the techniques, all the knowledge we've learned in this course. And gold, a real live with them. Can you hear those birds? Those are called Hadi. Does they beautiful. Humming in tenacious now coming into nice Now where it was, yes, we are starting an awesome project in the very next loss where we're going to apply a lot of the techniques you've learned to build a railway back. You're going to be adding things dynamically to the DOM. We're going to be removing things from the DOM. We're going to allow a user to search for items in the dog That's going to be fascinating and also hide elements in the DOM. It's going to be awesome. So I call white, stick with me. You've only got a 100 close to go. Would be a shame if you stop now. Thank you for all your support. Do the assignment. It's a fun assignment. There's no right or wrong rarely because it's an honesty system. You just gotta go through the assignment, answer the questions, and then I'll see you, my dear students in the very, the next class.