Jquery Mouse Events Part1

jQuery mouse events part-1

Hello guys! Welcome to the series of jQuery, in the last segment we completed the form module of jQuery. I hope you have practiced at least once what we have learned in the last module.

Moving on to our today’s segment, we’ll start a new module from today that is, events in jQuery.

From now on, the other four or five lectures and segments (videos) will be only on events. If you remember that we have covered events in HTML, then we have done CSS in which we have learned about events, in JavaScript, if you have completed the course from learnvern then we have covered events in this also.

So, events are those things in website making that are very important. And it can be handled with CSS and JavaScript as well, but basically, we handle it using JavaScript.

But to handle events with JavaScript, if we compare the code, then it will be less if we do it with jQuery. This means we’ll be able to cover the code in fewer lines if we use jQuery. Otherwise, even if you handle events with JavaScript or jQuery it will not generate any difference, it will give you the same output. This means whatever click events you’ll fire using JavaScript will be the same as firing click events using jQuery so there won’t be any difference, just a difference between the lines of code. In jQuery, there will be three or four fewer lines of coding.

We have already learned events in JavaScript and CSS, still, we’ll do a little review of- What is event? So is an action that gets fired when we do something. As written here, “jQuery events are the actions that can be detected by your web application”. means if you click somewhere using your mouse or move over a particular division or press any keys on a keyboard…etc., are considered as events.

Whenever we make a web page and want to create a dynamic, at that time events are used the most. Dynamic means performing some action and based on those actions some changes occur, and this is what is covered in the event.

In jQuery events, you can see here that there are mostly four types of events: Mouse event, keyboard event, form event, Document/window event.

We have learned about these four events in JavaScript before on how to handle them. Now we’ll learn how to handle these four events in jQuery, so in today’s segment, we’ll start on the mouse event, on how to handle mouse events.

The foremost mouse event is our click event, what happens in click events? We are all familiar with click events, that is, the fire of events when we click on the left button of our mouse.

On the webpage, on top of the division, you can perform whatever actions you want to perform by clicking.

As it is written over here,” it is generally used together with other events of jQuery”. This means we can also use click with other events.

In syntax, you can see two types of click. One is click and the other one is click function.

we mostly won’t be using the first one that is click, we’ll use the second one. Because when we click, we want to do something. Means, Let’s say we take an div element and we click on the button or click on something, then what is done, we fire some function.

Already we have seen some programs in jQuery and in every program, we have taken a button and on clicking that button we run some functions. So, we have already learned how this works, but today we’ll learn what exactly it does and we’ll learn its in-depth logic.

So let’s say, I am taking a simple example here, so firstly, we’ll open sublime text. So, this is our sublime text, we’ll do a little zoom in.

Now hereafter setting it to HTML, so because we are learning click event, so let’s say, I’m generating a program here,

“ example.. click…”, and here we’ll add our library, and here, the script so that whatever we write here can be added.

And …style…., and inside “body… text-align center”, and here we’ll write  “ h1 example click h1”….

So because this is related to click events, we’ll add a button. It’s not necessary to add a button where you can take any element, but I usually use buttons because a button is something that is used in clicking. If you want you can use the… P tag instead. Let’s take the p tag as of now and here we will write… “learnvern… is awesome” , okay? So this is our program. I’ll store it in the name of click.

Now here, let’s say, inside script I added

“dollar document…. dot ready…. function”  and here we’ll add

 Dollar “p” dot  click; now here, we usually write function after click. As in what will happen when we click. but, for now, I’m leaving it as click only. And I'll use this program after saving it.

This is our program that is running, and you can see it here when I click on “learnvern is awesome”nothing is happening, I have opened the program on chrome and here we’ll open the console. And you can see in the console that, even on clicking, nothing is appearing on the console and so no error is occurring here. So, the reason is we are calling the click function, but we don’t define the function.

So, if we want to perform some tasks by clicking, we need to create a function in click, for example-….

function,…. and here whatever we want to write, for example here I’m adding

Alert “p …. is clicked”,…. and I’ll save and reload the page.

And when I click on p it’ll show p is clicked. So this indicates that we have done something without clicking. If you don’t want to do anything on clicking them you can pass – empty function so that is not a problem, but if you want to show something or see changes or fire some action, etc so you can do that through function.

You can see in the slide the example we have taken of the click, so slide click then function and after that element click that we have alerted.

So, click” is very easy. It is very important in mouse events because most of the time we use the left button on the mouse for the purpose of clicking. So if we want to perform a function on clicking we can use click.

Next, we have a mouseEnter, it is very important as well. The basic meaning of mouseenter is if we have taken any element or have defined a division then, when our mouse will enter that particular portion, then what do we need to do?

I’m repeating if we enter our mouse in a particular region and there we want to perform some function then we’ll use mouseenter event. In every mouse-related event, there will be the same format. In syntax after the selector, we’ll use. mouseenter enter that is, whatever our matter’s name is, that can be click or hover, etc.

So mouseenter is the name of our function and here we need to form our function. This means you can’t pass empty parentheses in mouse-related functions; you have to mandatorily form a function.

Now the function is optional also, which means if you haven’t formed a function then there Is no problem, but from that what actions need to be performed will not be able to be defined. So, if you don’t want to do anything after entering the mouse then you can pass the empty parentheses, but that does not make any sense as we only write code when we want to do something.so definitely mouse-related events will involve functions. but still, that’s optional, even if you don’t write the function it will not show any error in the console.

So here we have our syntax, mouseenter means when we enter in the range of any particular area. So, let’s see if I copy our click program where we have changed our background color

And I’ll paste it in here;

Here we’ll write

 mouseenter…, p dot  here, mouseenter will come in place of click, so this is our change.

In every program, we use click only but right now we need to see mouse-related events that’s why we’ll perform some changes.

So let’s say when I’ll enter my mouse on this p, then what do I want to do? So let’s say here in style…we’ll give background color… in p, that is,

 light blue.

And now I want to change its CSS when it’s clicked.so, how will we change its CSS?

You can see here, CSS, which we have already learned in CSS jQuery manipulation. And exactly we’ll perform here as well.

So, here  “dollar p” dot mouseenter function  “, means we need to click on p and change the p, and this is our concept: so here

 “ dollar… p” dot… CSS…. “background-color”…,”cyan”; make sure you put a comma in between. Write cyan in place of light blue. We’ll save and go to our browser to check.

You can see here, on clicking nothing is changing, which means there is some mistake in the code where we have given light blue color in the background, which is not working.

On reloading, you can see now we have a background color of light blue, now the moment I enter the range area its color will change. And now I’ll come out of its range, now its color is not changing back to the previous one. Means once the color is changed to cyan it is not changing to the original color.

Again reload, I’ll enter its range, the color will change, but we will come out if the range color is not changing to its normal color. That is because we have only written actions related to mouse enter only. Mouse comes into the area and changes color, but what it should do when the mouse is taken back from the area, we don’t write about that, and that involves our next method, that is mouseleave method after mouseEnter method.

So, what does mouseleave do? If we enter a particular area, division, or an element, and if we leave from there, then whatever function or action is performed is done by mouseleave. This means I over the current program when we enter the area color gets changed, but nothing happens when we leave, but in the mouseleave function when we will enter the area nothing will happen but when we’ll leave color will get changed.

So, mouseleave have the same function and same syntax, just concept and logic is different, instead of using it for entering we’ll use it for leaving

We’ll take the same example,and copy-paste here…: and I will just replace mouseenter with mouseleave. I Will save the program…

 And here you can see on entering the area nothing changes, but when I leave the area, the color gets changed. means it’s showing the difference after the mouse leaves the area, but when I’ll take the mouse on the area again, nothing will change.

So, mouseenter and mouseleave are those events that are being used together. Here we just understand we learn them separately. Firstly, we learn mouse enter and then mouseleave, but what if I want to perform both of them together? So. To do that, we have to hover. So, what does hover do? Hover performs two tasks. Usually, we do not handle hover through jquery, because we already have hover in CSS. This means If I add p: hover  then my has to be done, but still if we need to hover through jquery, we need to have its knowledge as well.

That’s why, if we combine mouseenter and mouseleave it becomes a method of hover. In hover’s syntax, we include entering events as well as leaving events.

If you look at the syntax, you can see, inFunction and outFunction, both are written here. One is inFunction, that is when we enter and another function is outFunction, that is when we leave the function. Here part one is mandatory, that is of in function,which means you cannot leave hover empty, you need to add something. So, if I add inFunction, that is mandatory, but if I don’t write outFunction so it's fine , outFunction is optional.

So, how does hover work? So, we need to form two  functions here. You can see it in the example: we have written a function after hover in which we have passed one event, then have written another function in which we have passed another event. So, how will we do this?

So let’s say, I’m copying this click program and pasting it here, and replacing click with hover, I’ll remove alert from here, and you can see I have written a function here which ends here, so this makes our in function…,but we need two functions in hover so here I’ll write another function which will be our out function.

First  part indicates when I hover, enter, and the other part indicates when I leave. So here we need to add two  things

So here I’ll write

Dollar… “p” dot… CSS “background-color COMMA  red”  so that when I enter it will show red color, but when I’ll leave it shows

 yellow.

Initially, we’ll show” p “as green, we’ll save the program and will run.

So here you can see initially my p tag is green in color, but you see my mouse mistakenly hover over the area and its color gets changes so, I’ll reload it

So, initially it's green and when I hover, enter the area it turns red and when I leave, it turns yellow.

But it will not turn green again, why?

Because I have defined both of the functions, now if I remove this second function from here, as its optional, then we will save and reload.

So you can see The green color is no longer here, and when I hover it turns into red and when I leave nothing changes, which means our inFunction is performed.

Again, inFunction is activated because we have written something on it but not outFunction. And if we do control  z then it will work properly means it will perform in and out both of the functions.

So, that is up to you and according to the requirement you can add in function and out function. If you want to perform something on entering then you can only use mouse enter and if you want to perform something on leaving use mouse leave and if you want to perform both of the functions use hover.

We have covered this much in this video and other mouse-related events we’ll see  in the next video.