In our last cookies module segment, we looked upon how to delete cookies.
(3 seconds pause )
Okay guys ! Let's begin !
For example, an onclick event…mouse over effect…key up…key down… related to keyboard and mouse. We have also seen events in CSS.
right ..okay !
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 !
So if in case of HTML input field or button click, or other event is performed, then it is carried out through HTML.
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.
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?
We have to add onclick and change the background.
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.
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 ?
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)
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.
Let's go back to the slides. mouseover and mouse out have been done.
Now, mouse down..
“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.
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.
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)
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.
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.
(3 seconds pause ;typing)
Example… Window Events.
so the very first task in window events is, first i will save this as “window ….events”
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.
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…
(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.
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 )
Share a personalized message with your friends.