Events, Event Bubbling, setInterval & setTimeout | Sigma Web Development Course - Tutorial #74

In today's video, I will tell you about the events of JavaScript. There are many events in JavaScript. Like you want to take the mouse inside an element. Or you want to take the mouse out of an element. You can click on any element. You can double click on it. We will see about all these events in this video. Like this video and write JavaScript in the comment section. If you are enjoying JavaScript. Let's go to the computer screen. Let's roll the intro alright guys I have come to my computer sc

reen I will make video 74 here and today we will talk about events and why events are very important and why you will want to use it so much by making an index.html and putting boilerplate and adding script colon src I will waste some time and by making script.js I will tell you that we have some events which we need I have told this very clearly in notes that browser event is a signal that something has happened. You can also make custom events but there are many events which you can see in Jav

aScript you can listen for events and there are different types of events which you can see from MDN. I will take a very fast start here and I will make a button here. I will make a container div.container I will start from here and I will make a button here I will make a container and inside the container I will make a box I will write here then I will write a button and here I will write click me to change content or I will just write change content change content and here I will give an id to

this button with the name btn now what I can do is, I can say let btn is equal to document.getElementsById and I'll say btn that take the button with the id btn and I can name it anything, I can name it button, I can name it btn, it's my choice and I can say button.addEventListener and first argument is for which event you want to listen and second argument is function which will run once you listen for the event if you find this a little overwhelming, then i'll explain first element i took her

e, i want button now when i click on the button So here I have written the name of this event as click This event could have been something else, it could have been double click, it could have been mouse over Meaning I can take the mouse to the button And after that what I will do is As soon as someone clicks on this, what you do is Change this content So I will content document. i can do anything on this click i can put an alert i was clicked and when i run it and click on it it means that this

click is working and it is working properly alright, now i want to show you if i want, i can do anything i can say document.getElementByClassName and i will say or i will use query selector whenever i want to select an element and I will say dot box here because it has class box so this element will be selected and I will say its inner html, do that yay you were clicked ok, enjoy your click, ok I have written this, so what will happen ok, enjoy your click, ok I wrote this, so what will happen a

s soon as I click on this button, its content will change I will show you, I clicked, this is you are clicked, enjoy your click clicked I will reload, things will be normal I will click on change content again, now see this you are clicked, enjoy your click is clicked so in this way we can listen for the events if I write here browser events mdn so I will get the reference of the event and the reference of the event will tell me what are the events, now here many types of events are related to m

ouse, if I want to see all the events so are many events related to mouse if i want to see all the events, i will open mouse events and here i got this page i will copy and paste this page for you so that you can easily see all the events and i will comment out and i will write list of all mouse events this will give you list of All mouse events With this you will get a list of all mouse events And it will be easy for you Now suppose i want to double click You can read all these methods There is

an event called DBL click Whenever you want to do anything If you want to double click You can search on internet Is there any event With which i can listen to double click If there is, then you internet. If there is an event, you can listen to it. If there is, you will know. I will do one thing. Index.html is already running. If i click on it. I clicked again. Double click. I can listen to the double click I can also make a windows clone I can listen to the double click Then mouse down means w

hen you press the mouse button Then mouse leave fired when the pointer of a pointing device is moved out of an element that has a listener attached to it means you took the mouse up arrow ok mouse down means you pressed the button, it will be done as you press it mouse enter, mouse leave means you took it and removed it mouse out means when you off the element to which the listener is attached or off one of its children so these events don't need to be kept, to be honest, I don't care about it I

don't want to lie, I don't care you should keep it or not, while working it will come while doing trial and error things will come some things are definitely kept, like context menu which opens with right click so this event will open, means it will fire when you will right click, so if i want that the context menu i will show you i will make one more copy of it and i will say when context menu opens then do an alert and say I will say when the context menu opens, then alert and say right click

please or I will write don't right click don't hack us by right click please ok, suppose I did this so I will right click as soon as I reload it I right clicked, I don't know why it didn't work let me see why it didn't work, I will right it as soon as I reload it. I right clicked it. I don't know why it didn't work. Let me see why it didn't work. If I right click on it, then see don't hack us by right click please. Okay, fine. So I will right click. See don't hack us by right click please. Okay

. So what will happen if it is listening to right click? So there are many events like this which you can use. There are keyboard events, key down, key up. And if you want to see keyboard events, then you go to keyboard events. See there are keyboard events, key down, key up and if you want to see keyboard events then you can go to keyboard events, there are many events in javascript not only mouse events, keyboard events if you want to see, then you can see key down, key press ok, fire when a k

ey that produces a character value is pressed down, ok, key up ok, then there are mouse events, keyboard events all events are enumerated on this page So you can see this, ok So key down, key press, key up You can see all this, ok So I will do one thing, I will tell you a key down I will show you a key down So if I say here key down ok, key down So what happens is, one minute I will double click this, what happens is, let me double click this so the second argument takes the event object this is

called event object and if I lock this console so you can see the event which is printed here, let me inspect and as soon as I press any button on keyboard I pressed G I pressed G, nothing happened Key down So here I have to take my mouse here because I have put this event on it So if I press D or suppose I I clicked on it, after that I will press any key So see it is working, okay So I reload And I click on it and then I press something, then here This is showing me all this so what I have to

do if I want this event to work forever so I will put it on document so whenever I press key, see whatever key I am pressing, I pressed H, I pressed A, R, R, Y so it is showing here and here this key and this key code is showing me so I can say that print e.key or print e.keycode so i can print e.key or e.keycode and you can see that i am pressing anything in the document so this is key and this is key code so sometimes what happens with key code if we have to take a key as a number so we can ta

ke it, like i want to make a game and i want that mario come here and jump when i press up arrow key so i pressed up arrow key so what is arrow up it is a key and what is its key code key code is this now see this key code is cut and this property is deprecated which means we don't want to use it we want to use key only we don't want to use key, we have to use the key only, we don't have to use the key code, so I will check which key is it, if I press the arrow up, and the code becomes intuitive

to see, so you can use all these things, and now you can see here that you can use keyboard events, document events, all these things, then there are some events of the form, like what to do when the form is submitted submitted what to do when the form is focused what to do when the input is focused what to do so you can check out all these events so if I search the events of the form so I hope I will get the form event I search focus focus, focus in focus out so whenever an element comes in fo

cus like there is an input then you will see this event getting fired now the concept which I am going to teach you that is very important and for that I will make a whole file and its name is event bubbling what is event bubbling, it is asked a lot in interviews listen carefully, so I will do one thing here I will write event bubbling and I want you to see what I am doing here so that you can see it clearly, so what I will do is here div dot container, ok I will make it and I will write contain

er one, I will make it in this and I will write container one, I will do one thing div. container, ok and div. child container, ok after this I will write div. and I will span it ok, I will span it and I will tell you why I am doing it, to explain things I have spanned it, ok and after this I will put a div in it div.child and I will write I am a child in it and that's it I have done this here now what will happen you understand this it is a very important concept I am saying it again and again

I know but it is a very important concept I will put a script here. Script, src, not src, just script. Script, and what I will do here, I will say whenever someone clicks on child, then what should happen, you will put an alert that child is clicked, put something like this, ok. So it is not a big deal I will say document.getElementBy or query selector and I will say.child .adEventListener I will copy the whole code, I will not waste much time I will copy it directly and I will say click on it a

s soon as it is .add event listener, I am directly writing single liner, I know I will say as soon as it is clicked then what to do I will write child was clicked child was clicked ok, I will do format document so that it looks good, so child was clicked I have written here, after this what I will do I document so that it looks good so I have written child was clicked after this what I will do, I will put one more event listener and this time I am going to put this event listener on child contai

ner I will say put this event listener on child container and I will write child container was clicked same thing I am going to do on what? on container and I will say container was clicked on what? on container and I will say container was clicked, ok, it's a simple thing and I will click here I will not put the context menu, I will click so the first argument is click of add event listener, if I turn off word wrap then you will see what I have done, I have put an event listener one on child, o

ne on child container and one on container now see, in On child, child container and container Now see, in container there is child container And in child container there is child When i click on child Then automatically this event Will get bubble. This means JavaScript says, you clicked on child Now if you are saying You live in UP, If you are in UP Then you live in India automatically In Asia also, and if you live in this world The answer is yes So javascript says that if you click on this chi

ld Then technically you clicked on child container Because child is inside the container And you clicked on container because container is complete this is complete container so technically you clicked on the container so that's why event bubble up means it seems like click event was on this but it was on this, then on this then you clicked on body, then on html so i will show you i will give some styling on this child then you can click on the body or you can click on the html so i will show yo

u, i will give some styling to this child it is not necessary to do this but i will give some styling i will say that make the background of dot child alice blue and i will make the border 2 pixels solid black i will give padding 34 pixels margin 34px and if I run the page I am a child is here, so I clicked on child and child was clicked I will say ok child container was clicked, ok container was also clicked, ok I clicked on child, I will put cursor pointer on child so that you can see how far

is child cursor pointer on child so that you can see how far is the child cursor pointer so I clicked on child so child container was clicked container was clicked, everything clicked if I work outside this I will give padding everywhere, I will give child container also child.childcontainer and I will give it a background I'll give it a beach and I'll also put this margin padding in it and I'm going to do the same thing in the container, so I'll say that do it in the container and this time I'l

l change the color a little I'll make it yellow and I'll make it 1414, I think change the color a little bit I will make it yellow and I will make it 14x14 I think I have given a little more margin padding so 14x14 and we will also make it 14 ok so this I have done and now you see one thing here this is our child container there is a container inside the child container and I have put a span here let me do one thing, let me divvy it up because span is an inline element or I can section it so it

will be a little easier see this is child this is our parent of this and this is parent of this so if I click here you saw all three events were fired on imchild if I click here then child container was clicked and container was also clicked but if I click here then only container was clicked and container was also clicked. But if I click here, then only container was clicked. Okay. I have put these 3 events. By the way, if you are thinking why body was not clicked, because 3 event listeners are

there. I am answering all your questions. Okay. Now you will say that I don't want this. If I click on child container, then I only want child container. Why is it happening? I don't want bubbling. JavaScript says that we will do bubbling by default because If i click on child container, i need only child container. Why is it bubbling? JavaScript says we will do bubbling by default. Because technically things are sitting. You clicked on this and this. You said it's same but i don't want it. Jav

aScript says if you don't want it, stop propagation. You said what do you mean? I will tell you what it means. stop the propagation what does it mean? I told you that if you are using any event listener then you can take an event object and with that event, you can play with the fire so you say e.stoppropagation e.stoppropagation and what will this method do? it will stop the propagation means there will be no bubbling this behavior will not be shown so you see when i click on this child so only

child will show let me comment this i have stopped the propagation on child when i click on child, child was clicked that's it, the propagation stopped event didn't propagate. It didn't happen that it happened to child, parent, parent's parent, No. It didn't happen. It happened to child only. Because i stopped the propagation. I told them to handle the event on child. I don't want propagation beyond this. Okay? Good. handle it, that's it I don't want any more propagation okay? good so this is i

t, I am a child it's here, good, very good but if I click outside it, child container was clicked yes I clicked, container was also clicked so I will stop propagation here also so above this event there will be no event fire this is called stop event bubbling so the question is asked in interviews, what is event bubbling you will say that you will listen to an event on any element so its listener will be activated but its parent will also be activated because you are clicking on an element so te

chnically you are clicking on it's parent if you are dancing in your room number 4 then you are dancing in your house, in your city and you are dancing in your state in this country, in this world in solar system so technically your you are doing is your event is propagated someone will ask you from above he will say he is dancing on earth he will not say he is dancing in room no.4 he will say he is dancing on earth so this is called event bubbling and if you want to be told that you are dancing

in this room you don't want people to say you are dancing in this room you don't want people to say that you are dancing in this world, in this planet you stop the propagation you say that I am dancing here neither I am dancing in this house nor in this state ok so this is your way to stop event propagation I hope you understood and I hope you enjoyed understanding this concept ok in notes I have written everything very well the way we add an event listener we can also remove an event listener

like add event listener is used to assign multiple handler to an event along with that, remove event listener you can see the same function same function object you can also remove an event listener so you can make a variable object you can remove event listener so you can make a variable and by giving handler you can add event listener and if you want to remove you can use the same variable and remove it so that event listener will be removed I have already told you about event object event.typ

e, event.currentTarget Event.clientX, clientY In case of your cursor, mouse event So all these are the properties of the event By the way, why don't you do one thing If I press any key, then see here eventX, event Key and event key code I have printed So why don't you print the event and see the object inspect it yourself, so if I pressed a key, see what happened, this event is printed and if you want to know what all is there in this event then you can see, it has key, key code, location meta k

ey, repeat, return value, shift key don't know what all is there, you can see bubbles are true or false alt key is false if you press alt key then alt key is false if you press alt key then it will be true if you want to control c then you can see alt and c are not pressed you can do all these things it is very simple and straight forward thing and I have written it in notes with more beauty there are practice sets in it which you can solve but I have covered everything here now you can handle e

vents through html attribute like you can write onclick is equal to and run a javascript function like this or you can do it like this that element.onclick is equal to this function invoke so you saw this in notes and you can do it but traditional method is this, mostly used method is this that what you will do you will use an element.addEventListener you will write the name of the event and put a function that run this function if this event is fire ok so here we have talked about all these thi

ngs now one thing is left which i want to tell you and that is set timeout and set interval i want to cover that in this video i don't want to make more videos about this because this is very straight forward thing if i want something to happen ok, it should happen again and again so what I will do I will do it on this page suppose I want something to happen repetitively every 2 seconds so I can use set interval set interval is a function which takes a function a function takes a function and ta

kes time how much time it takes in milliseconds so if I write 3000 here so it means every 3000 sorry every 3 seconds you will get to see that whatever is happening inside it like I say that every 3 seconds what you do is that change the color of the child container ok, child container's dot style dot background is equal to you do, let's say red, ok every 3 seconds I want to generate a random color here ok, so what I can do is I will pick up a random color generator from the previous video becaus

e I don't want to repeat the same thing in 72 we made a random color generator so I will open with code here and this was our random color generator I will delete this because I did the solution of you guys I will copy get random color function from here ok, and I will bring it in my script ok, because I don't want to spend much time I will do format document and I will do get random color, ok, simple I will get a random color every 3 seconds so if I show you a page, where is the page, see every

3 seconds its color is changing, you can see if you want to start doing this disco and change the color is changing every 3 seconds if you want to change the color of the disc so what you can do is you can change the color every 1 second see here, the color is changing every 1 second so what will set interval do? it will make you repeat the same thing again and again if you want to run some set of code in every second then you can do it through set interval, ok then there is clear interval, if

I say let a is equal to this and console.log a then what will it give me, if I reload it again, then what will it give me oops, I want to inspect, I want to open console, so it gave me 1 here so what I can do, I can say clear interval and I will say 1, so what will happen, it will stop happening so I will hit enter, so this interval is cleared, means whatever number it returned you can use it with clear interval and with that the set interval will stop running its a very simple thing now i will

tell you the same thing by making a copy of it and you will say why are you making a copy i am making a copy because syntax is same i will say exactly same, this is setTimeout setTimeout runs only once after a certain period of time I will say exactly the same Set timeout Set timeout is only run once after a certain period of time So you see here I said that after 5 seconds Or after 1 second change the color, so I will reload it So after 1 second the color changed only once So if I want to work

after a few seconds Then I can use set timeout So I have set timeout so I have set timeout and you can see after 1 second color changed and I can clear set timeout I want to change color after 5 seconds ok I will reload it, count 5 seconds color is going to change after 5 seconds count 5 seconds color will change after 5 seconds after 5 seconds color will change I will reload it and suppose I don't want to change the color so I will write clear timeout I will keep it as a copy so before it start

s, if I write clear timeout, now see the color is this if I run clear timeout so it is clear timeout means what I was going to do, I changed my mind, now I don't want color to change after 5 seconds if I run clear timeout then it is clear I changed my mind so after 5 seconds this function will not run so to cancel set interval we use clear interval to cancel set timeout we use clear timeout very simple thing with that set we have covered a lot ok, its a very simple thing i hope you understood we

have covered a lot with that set and it is very important to access the notes because it will remind you of all the things you have done in the sigma course then there is mdn reference, internet is there you are giving 400 rupees per month whatever you are giving, tell me in the comment section i hope you are understanding how important it is to download notes and you are understanding all the concepts one thing you have to do is go and review this course in the first video give me 5 stars out

of 5 I am not giving any compulsion for this but if you do it, it will feel good from the heart new people who are joining this course, it will be very helpful for them they will be able to know whether they want to do this course or not that's all for now guys Thank you so much much for watching this video and i will see you next time you