#48 Understanding Event Bubbling | DOM & DOM Manipulation | A Complete JavaScript Course

in this lecture we are going to understand a very simple Concept in JavaScript which is event bubbling and it is also a very important interview question so what is event bubbling event bubbling is a fundamental Concept in JavaScript document object model that is Dom that governs how events propagate through nested elements and it defines the order in which the event listeners are triggered when an event occurs on an element within a nested element structure now this statement might be a bit confusing so let's try to understand it practically so here we have our application in this application we adding this header in that header we have this text Dom manipulation so what I'm going to do is I'm going to add this header inside a div and then I'm going to add another div inside that I'm going to have have a span and inside that I'm going to add a button okay and this button let's say login now let's go ahead and let's add some style for this div and this div so on this I'm going to add a class so let's go and let's add some CSS class I have saved this file let's go to style. CSS and there if I scroll up we have this header here now instead of adding all the CSS class on that header and we are going to add it on header title let me also add some CSS Style on header okay and then I'm going to add display flex and for this header title I'm going to set the width to let's say 80% and then we have another CSS class header login for that I'm going to set the CSS class the width to 20% let's save the changes and now you can see that login button and there also what I will do is I'll add some padding now on this button Also let's add a CSS class let's call it login button and let's set some CSS styles for this login button let's also save this file let's change the width to 30% here or maybe 25% here and 75% here okay now it's okay and this much of style should be enough let's save the changes all right now let's go back to our index. HTML file so here if you see first we have header inside that header we have a div inside that div we have a span actually we don't need the span at all so I'll remove that span okay so this button is nested inside three divs first we have this header inside that we have this nested div and inside that we have this nested button so this button is child of this div and this div is child of this header now what we are going to do is on this button element I'm going to listen for click event and whenever the click event happens let's say I want to show an alert message saying button clicked okay and what we also going to do is we are going to add this on click on the parent elements of this button element also so for this button element this div is a parent element on that also I'm going to add on click so on this div also we want to listen for click event and then on this header also we want to listen for click event and here let's say header clicked and here let's say div clicked let's save the changes now just notice what happens when I click on this button element so when I click this login button you will see that we have this message button clicked because on this button element we have added this on click so whenever that button will be clicked we are displaying the alert window with the message button clicked so this is okay but as soon as I click on this okay button you will see another alert window which says div clicked and this message we are displaying by adding onclick event handler on this div element so when the div element will be clicked this div clicked message will be displayed and when I click on this okay button again you will see that header clicked is also displayed so you see we only clicked on this button element but the click event is propagated from the child element from this button element to its parent element to the div so on that also the click event was handled and then it was propagated to its parent element which is this header and on that also the click event was handled so we just click the button element but the click event was handled on the parent elements also and this is called as event bubbling the process of event bubbling starts with the element that triggers the event and then it bubbles up to the containing elements in the hierarchy now instead of clicking this button if I click let's say the div inside which this button element is there you see it says div click and when I click on this okay button it is propagated to its parent element which is this header and on that also the click event was handled and it says header clicked so this is event propagation event bubbling now what I will do is I will remove the click event from this button okay so on the button now we don't have click event but when I click on this button since this button is present inside this div and the click event will be propagated from the button to the div you will see the alert window with the the message div clicked let's actually see that let's click this button and you will see this message div clicked we clicked on the button we are not handling click event on that button element but the click event has happened on this button element we are not handling it and that click event propagate it to its parent element which is this div and on this div we are handling the click event so for that we are seeing this message div clicked and from there it will also get propagated to its parent which is this header and there also we are handling a click event so again we will also see this alert message if I click okay we have seen that alert message also so this is event bubbling so I hope with these two examples now you understand how event bubbling works now let me get back the onclick event handler on the button element okay now let's say when we click on this button we don't want event bubbling to happen when this button is clicked we only want to handle the click event on that button element so basically we want to stop the bubbling of the event from the child element to its parent elements how can we do that doing that is very simple so now here I will remove this code and here to this on click I'm going to pass show click alert a function a JavaScript function which we are going to create you can name this anything let's go ahead and let's create this function and let me also say save this file let's create this function in script.js file at the very bottom maybe and we calling it show click alert and as we have learned since this function is going to act as an event handler function we are going to receive an event object here that same event object will be passed to this show click alert so here also let's call it as event you can name it anything you can also call it as e okay and what we are going to do is on this event we have a method called stop propagation and what this will do is it will stop propagation of event from the current element to its parent elements and after that let's display the alert message and here let's say button clicked so now what should happen is when the button is clicked it should only handle the click event on that button and it should not propagate that click event to its parent elements in this case to This Ti and to this header let's see if that's the case so when I click on this login button it shows this message button clicked that is okay because we are handling that click event on the button by calling this show click alert but when I click on this okay button you will not see this message div clicked or header clicked because now we are stopping the propagation of event from the child element to its parent Elements by using this stop propagation method on the event object so I hope now you understand what is event bubbling and how we can stop event bubbling and as I said this is a very important interview question which you might be asked in a JavaScript interview so I hope in that way this lecture will be helpful for you this is all from this lecture if you have any questions then feel free to ask it thank you for listening and have a great day

Channel: procademy

Views: 154

Keywords: javascript, es6, es 2016, modern javascript, javascript tutorial, complete modern javascript course, procademy

Id: FY4BhL4z4X4

Length: 9min 38sec (578 seconds)

Published: Tue Jul 09 2024