Introduction to Browser Events | JavaScript Tutorial in Hindi #47

In today's video we are going to understand how browser events work. We'll also see what are the methods used to handle browser methods. Which methods we should use. Let's get back to the computer screen. Let's get started. [ MUSIC 🎶 ] So guys I've created a repl here and in it I have created something to explain you about events. And I want to tell you that if you do anything in the browser. Let's say you click on the mouse or you move the mouse around. Then an event is generated. Now if I tal

k about what is an event, It is a signal that something has happened. Like a wedding in your neighbourhood is said to be an event. Let's say if there is someone's birthday or someone falls while walking. That is also an event. Or someone is eating food that is also an event. So birthday, wedding, someone's falling, a dog biting a person. All of these are recognised as events. So now let's talk about DOM events which I think will be a new concept for you guys. For example, DOM events like mouse e

vents, keyboard events, form element events. And document events. Now you will think everything was going great in JavaScript. What are the events? If you click anywhere in the browser then a click event is generated. And you will want to handle that particular event. Now I'll write here events. And I will do one more thing over here. I will write here . And after that I’ll create a button in it. Now if I write here onClick=”alert(‘hello’)” I've already used double quote in here that’s why I’ll

use single quote now. Then what will happen is. Let's say I will write this or even better I’ll write click me. Now when reload the page it's title will change to event and. When I click on the button it will display an alert “hello”. This means if you click on this button then. This particular JavaScript will get executed. Can I write more JavaScript code in this? Can I do something like this? Let a = 6; And let's say after that I’ll console. log(a) Can I do something like this? Now if I write

some JavaScript like this will it run? This is the question and let's find out the answer to this question. I'll tell you before only that this will work. This JavaScript will run. Now if I click on the button it will display an alert "hello". And 6 will be printed in the console because I printed it. With the help of console.log(a). Now the main problem is that you cannot write this much JavaScript in here. It is possible but not maintainable and also it will not look so good. And the solution

to this problem is. What we’ll do is instead of doing this. We’ll look at one more method to handle events. Let's quickly get back to the notes and consolidate all the knowledge. An event is a signal that something has happened. All the DOM nodes generate such signal. Now if you hover your mouse over a box, that is an event. If you move away the mouse away from the box or click it. Then that is also an event. If you release the click that is also an event. If you move the mouse that is also an e

vent. If you do contextMenu(right click) that is also an event. Keyboard events are: Key down, key Up. You press the key then key down and if you leave it then key up. Form element events are: When you submit a form or focus on an element. Form element event are submit, focus, etc. When your whole document loads then the document event domContentLoaded event pops up. Now we'll go back are our repl and see how these events work. So the first thing I'll do is that I'll assign an event to container

called onmouseenter. And on Mouse enter I'll write alert(‘container inside the mouse’) Like this. I’ll save and reload the page. And as I click on the button an alert will appear. “Mouse inside the container”. Alert will appear again and again when the mouse enters the container. Let's say I change this to console. log. Then I will get the message in the console. Now, let's say I'll write onClick = console. log. And inside that I will write. "Click happened in the container' I’ll reload the pag

e. The page is loaded now. And now when hover the mouse over the container it prints. "Mouse inside the container" in the console. And if I click on the container "click happened on the container". Will be printed in the console. It is very simple. I've also written in my notes also that. Event can be handled through HTML attributes. Input value = “hey”. And when we click, then the JavaScript inside onClick will be executed. And if you write onmouseenter then, when the mouse enters. Then the Jav

aScript inside onmouseenter will be executed. Don't put double quote inside other double quote because it will cause problem. Let's assume if you want to run a function or functions in JavaScript. Or a Script with 15-20 lines of code. How you will do that? I'll explain you that in the upcoming videos. Before that I will show you one more method to handle events. Which solves this problem to a certain extent. But then also a problem remains. What is that? I'll tell you now. So the first thing is

that you can easily handle an event using onClick. Which means instead of writing all these attributes. You can write here that the container which is document. getElementsByClassName document. getElementsByClassName document. getElementsByClassName("container") Not .innerHTML. Let's say if you write. Click home. Let a = document. getElementsByClassName('container')[0] And after that you write. Where does this " comes from again and again. Now, if you write a.onClick =. And you create a function

like this. I'll accept what the AI is suggesting. Let's say if I click this. First let me reload the page. Cannot set properties of undefined on onclick. Not ClassByName. I’ll have to correct it in both places. Now I will reload and if I click on this. Then it's HTML will change to hello world as I have written here. Have you noted one thing. I think I removed it from here. No, I didn't removed it. If I write onclick in both the places. Then the onclick in the JavaScript will be considered. It

will consider the onclick which is there in JavaScript. Now what we'll do is in the upcoming videos. Will understand other ways to handle events. We'll discuss about addEventListener and removeEventListener. I've also written a note here that adding a handler with JavaScript. Overwrites the existing handler. You can keep these attribute handlers but. If you bring attributes like this then these attributes. Will get overwritten in JavaScript I hope you understand how it's working. We’ll see more

things in the upcoming videos. Please access the JavaScript play-list and if you haven't. Accessed the notes yet, please access it. So that's it for this video. Thank you so much guys for watching the video. And I will see you next time. [ MUSIC 🎶 ]