Jquery Mouse Events Part2

JQuery Mouse Events Part-2

Hello Guys, welcome to our series JQuery. In our previous segment we learned about the mouse related events in JQuery and we will be continuing the same in today’s segment also. In our last segment we covered four methods that are Mouse key click, mouse key enter, leave and hover and today we will be covering the remaining methods. We will start with the mouse down event. Now what does a mousedown do? The mouse down method adds an event handler function to an HTML element. Simply, our every function adds a function to the HTML element. What will happen in this is that when we press this button, the left button, when we press it downwards then our event gets fired. It is similar to mouse click but if I keep it mouse down then my event will get fired. The syntax for mouse down is also the same as mouse enter and mouse leave. We have to write the name of the function and the name of the method and we have to write what action we have to perform. This is also optional but if we don’t write this then there won’t be any action so we will have to write this.

 Now we will go to sublime text. We will take the same example of mouse enter as we took previously and I will copy it and then paste it here. This is our mouse down method, copy, mouse down.. and here I will take the color red, so here I will save it as mouse down .Now we will run the program. Here as you can see initially the color is light blue and there is no event on hover but there is event on mouse  down. Now I will tell you, I will go over this and now I will click the left button of the mouse so as soon as I click the color changed to red, I am repeating, reload, and click over this which means as soon as I press the left button of mouse down then its color changes. Now this is our mouse down method, that it comes into action on the click of the button.

Now let’s go to our second method, that is our mouse up method, means it is opposite to  the mouse down method that means if the action is being performed when the button is clicked then on releasing the button this event will come into action. Lets say, the program we did for mouse down, we will copy it and write it again but this time I will write its name as mouse up. Here up and here also up, save. Now we will run the program. This is our program. Now what I will do, I will take the cursor over this and after clicking once I won’t release it. So what will happen is I take the cursor and I press the button but I haven’t released the button as you can see I am still pressing it and haven’t released it yet. So what will happen, when I will release the button then my action will be performed. That is this one. I’m repeating, I came over this and now I am clicking but now my button is clicked but I haven’t released it yet. So here my action will be  performed when I will release it. So here is the difference between mouse down and mouse up, mouse down is executed when it goes down or when it gets pressed but mouse up gets executed when the button is released.

So keep this in mind , if there is a requirement related to this in future when you work in industry, then you have to keep in mind when I have to fire the event, when my mouse is clicked or when my mouse button is released, so according to that you can write its method.

Our next method after mouse up is mouse over. Now mouse over as it is written here when we enter a range as you can see” when you put your mouse cursor over the selected element then this thing is executed”. Now we have a question, we have already learned the mouse enter method, now if mouse enter also performs action on entering an element then what is the difference between mouse enter and mouseover. So here the difference between mouse over and mouse enter is written. “The mouse enter event is only triggered if the mouse pointer enters the selected element whereas the mouse over event triggers if the mouse cursor enters any child element as well as the selected element.” Means the difference is, we have two methods enter and over, if we take the mouse cursor on the particular element then mouse enter will execute but if we take our cursor on any child of that particular element then mouse enter will not execute whereas mouse over gives us a functionality that if we take the mouse on the parent then also it will execute and if we take the cursor on the child then also it will execute, so we have both options that if there is such a requirement that the action should be performed on hovering over both parent and child then I will use mouse over but if I want that the action should be performed only if the cursor is taken on the element then I will use mouse enter. 

So let’s see an example for this, here the syntax is the same as all the others, just like mouse enter, we have to write the function and here is the example. But here we will bring a little variation in the example. We will copy the program of mouse enter, and we will write it here. This is our mouse over. Here I will write mouseover…. everywhere, save, mouse over….. Now I will run this program. As you can see my program is running. Now I will take this mouse on this and the color changes, again I will take it over this and the color changes. But let’s do one thing, we have two programs mouseover and mouse enter, so in this mouse enter we will make a div above P and let’s put the P inside the div and now let’s style this div like padding…, fifty pixel, ….we can write it over here as well as above. Here…. div, padding, fifty pixel and background color… let's say ….we take light coral. So light coral is our division and light blue is our P tag and I will save it and take it over our mouse enter program and refresh it. As you can see this is my main div parent and this is my internal as in my child. So here you can see, our example is that if I take it over the child then the parent gets affected. So let’s say here I will have to make some changes, like here we took mouse pointer over P but instead of P we should make this div and when I enter mouse on div then the color of P changes. So what is happening here, on entering a parent the color of the child is being changed or we can perform the entire thing on div. So what will happen, initially the light coral color of my div will change to cyan. So if I reload it, now I will take it over div, the color changed, but we don’t have the mouse leave function on our mouse enter that’s why when we come here the color remains same, so let’s say I will use another method temporarily in this program that is mouse leave, and then I will bring the original color of my div that is light coral over her,save, reload... So now I went to div, the color changed, now I go back to child, so I went to the child but still the color remains the same, so now I will leave this. Again I went on this, I went on the child and even after coming back the color does not change. Now what we will do is we will write this complete program in our mouse over program. So that is mouse over. So this is my mouse over.

The opposite method of mouse over is mouse out. So instead of mouse leave we will write mouse out, ok. Here will be our mouse over, we will save the program. Now we will refresh our this program of, So here also I will take the cursor over this and the color changes, now I will go over the child, here if you see both the programs when we go over the child there is no difference, means the effect of the parent remains as it is even after the cursor goes on the child and only when I leave this then only this effect goes. Same thing happens in the second program as well. Here is the parent, we go on the child and even after leaving, the effect is the same. Now we will do one more thing over here, we will reverse the CSS we have added in the mouse over program means we will apply above the P tag means we will change the div to P, we will save this and then reload this. Now I take the cursor over this, take it on P and then come out of p and as you can see there are some changes. As you can see cyan changes to light coral as I bring the mouse out. No, I should make this blue again. Save, reload. I take the cursor, bring it out again it changes again to light blue which means this works exactly how our hover works, means if we see theoretically then we have been told theoretical difference that is if we go over the child element then the effects of mouse enter and mouse leave gets changed but practically when we performed this then this is not happening whether we use mouse enter or we use mouse over or whether we use mouse leave or we use mouse out event, we are getting the exactly the same output, means the relation between parent and child is being followed by mouse enter and mouse leave and is also being followed by mouse over and mouse out .

So here our theory is not matching because we performed practically here and saw that there is no difference, all the four methods are exactly the same. So mouse enter and mouseover are the same methods and mouse leave and mouse out are also the same. Now we have finished all our methods related to “mouse. 

So guys mouse out finishes here. Now comes the keyboard events of JQuery. So guys we covered some things in the previous segment and the rest four methods we covered in today’s segment. Guys all the mouse related events are many in numbers but are very easy to understand because when we work with mouse key events through JQuery then by using one of these methods we can fulfill our requirements and can develop our functionality. In today’s segment all the different methods that were told out of them the last four methods we covered mouse enter, leave , out, over related, we also saw the difference. If you go to Google or search its history that how does it work then you will find the parent child difference but that it is not possible practically, all four methods seem similar practically. So keep these things in mind. Our today’s segment and our previous video combining these two we have finished all the mouse related events. So I request you guys to practice all the practicals we have performed and if you face any difficulty during practice, if something doesn’t work out or there is some problem in the code, if there is any difficulty or understanding problem then you can tell us that at forum dot LearnVern dot com. We will revert all your questions with solutions there. Our next segment is keyboard related events on JQuery, so see you in that segment guys. Thank you.