Javascript Events

Javascript Events

Hello guys, welcome to the JavaScript series. In our last segment, we had completed cookies. We had conducted a total of four segments for cookies.

In our last cookies module segment, we looked upon how to delete cookies.

(3 seconds pause )

Okay guys ! Let's begin !

Today, we are going to look at events. Basically, in javascript, we learn about events.

But, if you have completed our HTML course in LearnVern, which is also a prerequisite for javascript, as I have told you earlier, we have already learned about HTML events in the HTML course.

For example, an onclick event…mouse over effect…key up…key down… related to keyboard and mouse. We have also seen events in CSS.

So, we have already covered all these events with HTML. But when we looked upon the events in that segment, we also wrote their corresponding javascript codes. When we learned about HTML, we did not have enough knowledge about javascript, as HTML is a basic way to learn javascript.

right ..okay !

But, at this point both are interrelated. If you need to work on any event within HTML, then you must know the javascript.

Similarly, if we are working with an event within javascript, we need to have an idea about the HTML.

Because, events such as onclick…, ondouble click…, on mouse out…, mouse focus…, etc, are written inside HTML, and then related codes are executed inside javascript.

In the same way, today, we are going to look upon how events are written and how they work inside javascript.

First of all, what are events in javascript?

Whenever we change the state of any element, it is known as an event.

For example, let's say I have a square, and I change it to round. Or, I work on something after a button click. Say, I need to change a square into a round through CSS, upon a button click.

So, how is this done? The state is changed from square to round. But, when does this happen? It happens upon clicking a button. So, we go from one state to another.

This process of changing states is called an event. So, in HTML with the help of mouse..., keys.., or other inputs.., events are fired.

“In HTML, There are various events which represent that same activity performed by the user or by the browser.”

Means In HTML, there are some activities, or events, that occur either through the user or the browser.

If the browser does something then it is an event. If it is being done through the user, even then it is an event.

clear guys !

When JavaScript code is included in HTML, so, when are these things used? As I said earlier, in the case of events, javascript and HTML are interlinked.

So if in case of HTML input field or button click, or other event is performed, then it is carried out through HTML.

The event is fired in javascript. So both are interlinked.

J S..

“JavaScript reacts to these events and allows execution”,

meaning, HTML has buttons, or elements, on which some action is performed, based on which an event is fired.

“So, this process of reacting to the events is called Event Handling”.

When an event occurs on working on some element, on either clicking upon the element, pressing a button, or any other case, reacting upon that event is known as event handling.

“thus Javascript handles the HTML events via event handler”

Whenever we work on events through HTML, javascript handles those events with the help of event handlers. It means when we work with HTML, how does javascript handle events? With the help of event handlers.

Here, we have noted some events. Like click, mouseover, mouseout, mousedown, mouseup, mousemove. First are mouse events.

We have already covered these in HTML while working with mouse-related events.

Today we will basically see how it works.

Let's open sublime text.

(3 seconds pause ;typing)

And here HTML….(3 seconds pause ;typing) Example Mouse events….

We have to fire an event when we click on some element.

Let me take an input field… type equal to… a button, value equal to… change background, onclick ….change background.

So this is our method. So where will we define it?

Inside the script, in the javascript portion, we will type the function and then the name of the function.

We have to add onclick and change the background.

So,

We need to change the background onclick. So, document dot ( 3 seconds pause ;typing) style or we also have an of BG color, hence

document dot body dot style dot background equal to the name like.(4 seconds pause; typing) .. yellow.

 Do you understand ? This means, I want to change my background to yellow. And whenever I click, my background will change to yellow.

So, I have changed this syntax.

I saved the program. In the program, we have written as it is, We can see the button. Initially, the background is white, and it changes to yellow when I click on the button.

So when does this happen? When I perform an onclick action. Here, onclick is the event handler that is fired upon the click event.

Javascript provides us an onclick event handler. ( e seconds pause)

In the same way, we have other events such as mouseovers. I would prefer to work on mouse-related events in a single program.

You can see now, we have a div.

( 4 seconds pause ; typing)

Let’s take the class as rect.

Then, here in style, we write ; dot rect... let’s take the width as 100 pixel and height also 100pixel , we have taken the width and height… and lastly for the background color lets take cyan. Now, we go ahead and save this.

So here, on the screen we can see our division has been created.

( 4 seconds pause ;typing)

margin …10pixel. Okay ?

(08/35)

 Now, the next event that we look at is the mouseover event.

All of us saw the onclick already ?

for mouseover, above this, we fire an event called mouseover and i write the …function - on mouseover. Okay?

when I mouse over, document dot body…

We can change either the color of the division or the body. So let’s say in this case, I take green color.

Let’s see what happens here.

So now, when I over my mouse here, then we can observe how the color changes to white to green, but I have not given any command for change of color on my removal of the mouse.

 Similarly, let's look at mouseout.

It is similar to mouse over..

So let’s say I write, on mouse….out and in this case I write on mouse….out.

( 3 seconds pause ;typing)

same.

okay !

function… on mouse out, and the same thing that we have written here.

( 5 seconds pause;typing)

Let’s see, if it works ?

Okay!, so now..

When I remove the mouse from the div, the color changes back to white.

The hover CSS does the same thing, but currently, we are looking at javascript event handlers.

Therefore, we are writing functions. The events of CSS can be implemented using javascript functions. ..

Let's go back to the slides. mouseover and mouse out have been done.

Now, mouse down..

Mousedown is,

“when the mouse button pressed over the element”

for example, when I click inside the div, then some action must be performed. So let's see what we can add

onmousedown…(typing) equal to onmousedown.

We can either change the color or create an alert with the help of a function.

alert mouse down… event is… fired. Save.

 When I click on the div, the alert is not fired, which means there is some error. 

I have pressed every button,

None of the buttons are working, so something is wrong with our method.

so, here on mouse down…I have again saved it..andIf i click here, you can see that “mouse down event is fired”.

means , when i click on the button, this alert box, we can see here.

Now you can see the alert on click event.

Now, the next mouse event is mouse up. It works when the mouse is released after clicking on an element. The left button of the mouse, that is also one event, that is ..on mouse..up…let’s say..on..mouse ..up..…I write function on it, 

I want on mouse up, my background color, which is currently been changed to green. you can see, when I hover it, it is green,

I want the background color to change to blue instead of green.

We can also create an alert instead.

That's not a big deal..but I am taking blue,..reload…i am taking cursor here, now, when I am explaining to you, i have kept the button clicked…i haven’t released it. when I do Up !

you can see here, mouse down event is fired.

The alert is overriding the mouseup event.

(3 seconds pause ;typing)

Let's remove the alert. When I click the mouse and then up, then the background becomes blue.

When I again click the mouse and then release it, the color changes to blue, and on the mouse, it changes to white.

I removed the alert as it was stopping the current event. Now, I have changed the color to red upon mouse press, blue upon release, and white upon removal.

Here, my alert box is resisting my event. Hence, I removed it. Let’s say, if we write the same event here; yellow, green, blue, white, red. OK? Let’s say i have taken red for mouse press, for mouse release i have taken blue and for remove it is white. We have taken different colors for each press, release and remove.

Color changing events are performed on these mouse events. When I hover over the div, the background changes to green.

Lastly, we have a mousemove event. It is almost the same as a mouseover.

Let's see if the event is activated. We write on mousemove and let’s perform a color change on the move as well

( pause for a few seconds for about 4 secs) .

Let's take black since it has not been used until now. Reload.

When I click on that, you can see the black color on screen.

(15/23)

 Here, mousemove overrides mouseover.

So, we can consider that tasks have been done by mouse over, that will be done by mouse move as well. These were the events related to the mouse.

now what we want to learn is,

So, we have event handlers for every event. The event handles, except for click, have similar names. We just have to add “on” before them, so these were all mouse related events. We saw that for every event handling, a function was created and added to HTML.

These were mouse-related events. Next, we have keyword-related events.

What is the meaning of keyword events ?

We have two events available: keydown and keyup. we will check both options, what happens on pressing or releasing any keyboard key.

Let's consider similar examples to keyup and keydown. Let's remove all the functions and the input element for now.

We will remove all the things from Div which we added for onmouse.

( pause ; 3 seconds typing)

example.. keyboard.. event.

Simple..

Let's run the program.

Ok. So here comes my box, I am clicking on it with the keyboard.

No action occurs as of now. So for the keyboard event, I go to the class named rect and i simply generate a function named onkeydown

(5 seconds pause ;typing)

Function…( 3 seconds pause ;typing)

simple

document dopt body dot style dot background equal to yellow.

(3 seconds pause ; typing)

I want the background color to change when the cyan-colored rectangle div is hovered over and a key is pressed.

So save and reload, I am here. I am clicking on it.

There is no effect right now. The reason for this is that… keyboard-related events are for the input fields. They do not work for divisions. I intentionally demonstrated this to show that no keyboard events are fired.

So, what will I do here? I will comment on this portion and here input type equal to text, we don’t need the name as of now so… onkeydown… and the function. ( 3 seconds pause ;typing) Save. reload , as i started to press the key, you can see, my background color has been changed to yellow…

Reload - focus - press any key, we can see our background has changed to yellow. this is my keydown, now same thing, when i pressed down key, my color changed to yellow. So, if i want the color to change to green when i release the key i will type:-

onkeyup…(8 seconds pause ; typing), this is my key up, and instead of yellow we change it to green

I will reload.

I will keep the key pressed.

When I keep the key pressed the color is yellow, and when I release the key, the color changes to green.Press - Release, Press - Release.

As I keep typing…., the colors keep changing. Yellow - Green, Yellow - Green…. yellow -Green.

When I press the key, the color is yellow, and when I release the key, or up the key, the color is green.

This was the example for onkeyup and onkeydown.

Are you getting it?

I hope you have understood so far.

(20/19)

Let's go back to the slides, we have form events available. Working with forms, for now, in context to javascript, let's look at the focus…submit…blur…and change events.

Focus is generally used for the input fields. Let's see it through a program. Let me copy the same program as of now.

(4 seconds pause)

We don't need this. (3 seconds pause ;typing)

Because it is a form, I need to generate a form.

(13 seconds pause ; typing)

Ok. form events. here we will take… form, and in forms we will take this input field and we will delete the key related events as of now.

The first event is focus that works when an element is focused.

Let’s say i am writing here onFocus. You can see I am using a capital F here. So that my event’s name is “event handler” and my function is not the same.

( 4 seconds pause ;typing)

Function onFocus….inside that i will write.. the same document dot get element by id, so that my color is changed. Same - yellow. Save and we will run the program.

so, this is my program.

As you can see this is my input field. When I click inside the input and it is focused, the white background changes to yellow.

This was the focus event for an input field. Right now the focus event is fired, however, no event is fired for focus out, therefore ,there is no change on clicking outside the input field.

Then comes form related, the Submit event is related to forms, which are fired when a form is submitted. When the submit button is clicked, the onSubmit method is called.

input type equal to submit… value equal to submit and when we click on submit, in our form we will have an onsubmit method call ..On submit…

So guys, you can observe that i have written onsubmit in form tag and not the input tag.

Keep in mind that onsubmit is written inside the form tag.

so, this is my on submit…( 3 seconds pause ; typing)

alert,( 10 seconds pause ;typing)

As I click on the submit button…you can see, “ from submitted successfully is shown here”

the alert event is fired when the form is submitted.

understood ,guys !

Back to the slides, we have blur. When the focus is out of the input field, then the blur event is fired. I want my background to be white when the focus is out.

let's say on this only i will fire onBlur event. so here my function will be the same… onBlur here, and once again I will change my background to white. So what will happen now, when I focus then my background will be yellow and when i will focus out then my background will be white. so focus - yellow, out - white. 

This event works the same with the tab key. Blur is very simple.

Now, let’s move to the last topic..so,

Lastly, we have onChange. “When the user modifies or changes the value of a form element.”

means When I click on the input field, the background is yellow. But when I type, the value of the input field changes continuously.

So, what can be done to fire an event for that moment?

Let’s say, On change…( 11 seconds pause ; typing)

In this case, let's go with light green color.

When I click, the color changes to yellow, i am changing its value but it is not happening. So for onChange we must have a different style.

So, that we will see..

The reason for this is, when onchange is fired, it is not for the content but the dropdown. So let me generate a dropdown. (typing) Let's say I will write an ID in select…, My dropdown and here I will add an onchange event. In option, i will write the first option, select…, simple i will take any from male and female.ok. Now you can see, when I change the value of the dropdown, the background color changes to green.

I have reloaded the program.

Right when the value of dropdown changes, the color of the background changes to green.

So, this event is for dropdown. Continuing with the slide, lastly, we have window-related events.

These are very simple events: load…unload… and resize. When the browser loads, we can use load.

“when the visitors leaves the current web page”

When the browser is closed, we use unload. And lastly, when the browser window is resized, we use onresize.

We have these three window-related useful events available in javascript. I removed the form for now, and we also don’t need the styles.

(3 seconds pause ;typing)

Example… Window Events.

so the very first task in window events is, first i will save this as “window ….events”

okay..

We don’t have any content in our program right now. I need to add my function to some HTML.

So I will write a function. my function is that i will write “alert” ( 3 seconds pause ;typing) “window is loaded” this is done.

When does this function execute? Let me add this function inside the body.

on load equal to my function…

we will keep this script inside the body only.

reload ..

When I reload, the alert is generated. “window is loaded” .

When the body loads within the browser, then the window onload event is fired.

Next, we have the window unload.

This can be practically impossible for us because when we reload the window we can perform some action, but what action can we perform while closing the browser? Because the browser is closing. Still, let's try.

let’s try by typing…

we write on…unload..function..

We know it is not going to fire, but still, we can try.

let’s say, function ( 3 seconds pause ;typing)

Now unload…alert... “window is closed” save ..reload..on reload we can see window is loaded. ok . I will close this.

As you can see my window is closed. So window onload practically doesn't get fired through the element. Because the window is already closed.

The event doesn't get fired when the window is closed.

Lastly, we have onresize.(4 seconds pause, till the program is typed ) So lets say above my window inside the body if i write onresize…

onresize…

(17 seconds pause ; typing)

Let me apply a green color upon resizing.

So program, window events.

When the window loads, I get an alert. You can see, as the window size changes, the color becomes green. When I maximize, the event has already been fired once.

Reload ( 4 seconds pause) So as I reload and resize, the color changes. If I resize from here, the event is fired upon resize.

This was the window resize event. We have completed the window-related events.

In today's segment, we covered mouse…keyboard…window…and form-related events in javascript.

Javascript is not limited only to these events. There are more events available. Those events that work with HTML content we have already covered in the HTML course of LearnVern. If you want to thoroughly learn about more events you can refer to the HTML event segment.

If you have any queries or comments, click the discussion button below the video and post there. This way, you will be able to connect to fellow learners and discuss the course. Also, Our Team will try to solve your query.

The next segment is about adding event listeners to events, means what we have learned in events, how to handle events differently that we will see in event listeners. Thank you.

 (edited script )