jQuery DOM Events part2

Hello guys, welcome to our Jquery series. In our previous segment we started learning about Jquery’s Document and Windows event and we completed 3 methods which are Load, Unload and Delegate.

 In today’s segment we will continue our previous segment which is Document and Windows segment and the remaining events will be covered in today’s segment. In total there are 3 remaining events of which the first one is the Resize event. Resize event is basically on the Windows event. If you have studied the Javascript course on LearnVern we have learnt about Resize in that course as well. On resizing Windows the events that get triggered are named resizing.

 Jquery does the same task exactly by Resize method. This means when we resize Windows… .. for example let’s open our previous event which is Delegate, you can see I can resize the window. So if I have to check events related to resize or if I need to perform them I can do it with the help of resize method. As you can see it's mentioned here that “this method can be used to perform some required action such as avoiding scrollbars when adjusting the elements of the page on window resize and many more”.

So this can be done with the help of resize. The syntax for resize is similar to our previous method. Write a ‘resize’ function after the selector.  It’s optional but like I always say we will write this for the action to perform. I have provided an example here. Whenever we resize here I want the current width and height of the window to be displayed. So how do we get the current width and height of windows? Width and Height method which we studied in our previous segment of Jquery Dimension module video…for screen’s current width and height and for divisions current width and height we use Width and Height method. But if we have to get the width and height of the complete window we can use window in the syntax.

This is a simple program and I will show you how we will do this. I simply need a span in a program that can show me the current width and current height. So for this I will open sublime text and copy my Load program and paste it here and because this is resize related I will type resize. I will remove the portion after the document dot Ready for now..resize and we do not need this iframe here. Instead of this I will type “  ‘p‘ please resize the window to get the current width and height… of the window”. And here I will type span. I am taking a span here because the result that I get which is my current width and height I will be able to show here. So basically what we are going to do in this program is to show window resize width and height. So what we will do here is that…document.ready (Document dot ready)  is already written here.

We have to make this for window resize. So what are we resizing here? Are we doing internal division resize here or are we resizing the complete window here. So we are resizing the complete window here. So here we will type$(window). So this is our milestone here. So here we will write a dollar($) window because we are resizing the window here. So $(window).resize and then my function…. I believe you are following our step by step process about events/programs we are learning and as we are progressing in our course you are getting a clear idea on what small changes we are making..when are we using dot click. When are we using other events, when are we using some other event after dollarlike we have written ‘dollar window’ today. So please keep in mind the different events we are using..as these small nitty gritties will help us in becoming a proper developer. So currently I have to resize my window and what do I want to do on the window resize . So here we have our span. So dollar …span.val.. so what value I have to type here..I can either take val or span here so for now I will type span value here and then what I have to type in value here…what we have to show is current width and height here. So we will type width….in fact instead of val it would be better if we type html here. So type html and within it width plus dollar window. width  plus give a space..type height space and outside this  plus dollar window. height. okay? Let’s run the program and see what output we get. So this is our resize program. So now that I have zoomed in, you can see my window’s width and height is reduced and when I zoom out my width and height is different. Now this means the current width and height is displayed under width and height here. Now you can see I have moved it out and I will resize it. Now you can see as I am resizing width only the width value is resizing and if I resize height only height value is resizing(changing).  Now if I update both the values both width and height are getting resized . So this is our Resize which works with windows and to get the width and height of the window we have used “window” as the object. So this is our resize program and I hope you have understood the program. It is a little difficult but there is nothing different here. We have just used window instead of document here and we have shown the result in span here.

Let’s move forward in our segment and discuss the Bind method which is after the Resize method. If you have completed LearnVern’s  Javascript course, I have taught about the Ed Event listener method. What Ed Event listener does is it adds a listener to our current element, for instance, click, double click, resize and many more. Similarly we have the bind method in JQuery. Now what bind method does is..we have seen mouse events and keyboard events. If I want to bind mouse, keyboard and document events to some other element without doing anything  I will use the bind method. For instance if I have division and I want to bind click events to it, so, instead of.click I will use another variation with which I can write this and it is the Bind method.

The parameter is event and I am supposed to write that event . If it is click I will type click in quotes here, if double click mouse enter then I will type mouse enter, if mouse leave then it will be mouse sleeve, whether key up or key down and many more. Data and Map is optional so we will cut it and not add anything there. But we will type a function there as that will indicate selector, meaning, binding on the element any event whatever it is whether click, mouse enter, mouse leave, hover and others and function whatever is the task. So in this case two things are mandatory: event and function. So basically instead of writing bind directly.. indirectly if we have to update or add any method we will use bind. If in the current program you would like to bind any event dynamically we will use bind. We will now take a simple example. I will apply a click event on P. But I will not write .click directly I will write bind. So what we will do is.. I will once again take the Load example.  I will copy and paste it once and I will write here ‘bind’. Ok? Let’s remove the iframe…and this is bind..Now what I have to do is add a click event on P but using bind method.  So I will type “click this…. statement”, ok? So we have to bind on P.. So this will be dollar..p…and here after typing dot..click we can type function  and then alert..clicked.  Now we will run this program this way…here is click.. we will name it bind ( 6 seconds pause, typing) and my program is running here..Click this statement. So I will click here..p is clicked.. this means after clicking on it I am getting an alert box. Here inside P we will type cursor pointer and now here I have directly typed click but I want to do this with bind. So what I will do is I will replace click with bind and here I will add click and comma. Ok? So here I am binding P with a click event which will give me an alert. So what I have done is I have replaced click with bind and here with click. We will save this program and reload. So you can see the cursor  here..click..and this is my alert box. So here not only click I can also type mouse over... Let’s see if I get an alert with mouse over. So here I did mouse over and I got an alert,  So this indicates whichever method..whichever event you want you can bind it this way. Whichever selector you use with that. This is a dynamic way to bind any element.  Let’s say when you are developing a web application there are possibilities of dynamic elements getting generated. So if dynamic  elements are getting generated so there will be dynamic actions and events that will get “bind with it. So in those cases to dynamically bind instead of typing statically click here dynamically we can pass an event here. So this is our bind method which is very easy.

After “bind”,  comes the Unbind Method. This is nothing but the reverse of the Bind method. If we can add any event with bind so definitely by using Unbind we can remove it.  So it is similar to the syntax of bind. We will just change the name here to Unbind. Here there will be an event…as in which event will be removed. With Bind we used to add an event here to bind it but here we will type an event to remove it. Ok? So let’s say I generate a program here in which if I click my event it will get removed. So what I will do is…here I will copy the bind program and paste it and here I will type… “unbind”…. I am removing this portion for now..here you will type unbind and we will remove this P... Let’s say if I type a statement first..”P …hover this statement”. Then I will add a button here…. “click to… remove the hover effect. I will give an ID to the button “button”. And I will once again paste this P statement here. Ok? I will give a click event to the button here ..that whenever my button gets clicked, at that time the mouse hover event should be removed... So hover the P statement. So first I will have to hover P to get it done..So this is how it comes here..”$ P. hover function dollar..this .css background color…, light coral.” (Dollar p dot hover function dollar this dot css background color comma light coral) So what I have done here is…if I hover over P the color will change to light coral.

But I want to remove this effect when I click on this button. Now I will run this without the button click. Save it in the name of Unbind, run the program. So this is Unbind.  Reload. So now you can see I have 2 statements “Hover this statement'', `` ``Hover this statement” and there is also a button to remove it. But we have not typed anything on the button. So this will not run.  So I will hover here and hover out. So you will see that on hovering the color has changed. No action will take place on clicking the button. Now I will go over this statement and the color will change on hovering. But what I want is that when I click on this button this effect should not be present.

This means when I hover on it once and if it gets changed it is fine. But if I hover over any statement after clicking on this button that effect should not be present. So how can we do this : the place where I have mentioned “button click” removes the hover effect…there we will mention “dollar p… dot..unbind. So what do we have to unbind here? The hover.  So for now we will have just this because we do not have to execute any function here after unbind. If we want an alert then we can write a function and give an alert. So I will save this program and reload it. 

So when I move the cursor over this the color gets changed. But I did not click on this button. Now I will reload it by clicking on this button. You can see the hover is still present. This means the Unbind is not working properly. So now I click again..once again..it is still not working. So I will have to check what is exactly wrong with my code. So over here, after typing unbind, let’s check what is wrong. As we can see we have applied hover over P. But we have not used the bind effect on P. So the point is if we bind any event, we can unbind it. But if we have statically added an event here we cannot unbind it. So I will rewrite the hover. “Bind… hover…, “. So what is happening here is: I am binding hover over P and I am also unbinding it. And now I will save the program and reload it. So when I am hovering over it you can see it is already unbind without clicking. This is the button ID.(7 seconds pause, typing)  The reason this is not working is I have used hover. Instead of hover we will type… “mouse over” because mouse over, mouse leave, mouse up, mouse down java scripts….Jquery events will have to be used here. So I will save this program, reload it.

Now when I mouse over it changes to red . Reload. Now I mouse over, click the button..and now when I mouse over the bind method of mouse over that I used is removed. It did not execute when I hover over the other statement. I reloaded again, hovered it, clicked the button. Now wherever I move the cursor it is not giving the effect. So this is our Unbind method. When we learned the Unbind method, we saw that it is necessary to bind the method so that we can unbind it. Hover cannot be used and we will have to use methods related to mouse like mouse up, mouse down, mouse leave, click and others. So this is Unbind.

In the previous segment we learnt about 3 methods of Window and Document which are Load, Unload and Delegate. In today’s segment we learnt about the remaining methods which are Resize, Bind and Unbind methods. And with this we have completed the methods related to Document and Window. We have covered all the events. Guys this marks the end of the Jquery module related to events. Events are  very important in Jquery because it is easy to handle events here  compared to Javascript. I request  you all to practice whatever events we have learnt here. Whatever we have learnt in this video and previous video, please practice the practicals. You can find code files in our video’s description box. If you face any difficulty while practicing please let us know.  If you have any questions related to our video please let us know at forum.learnvern.com. We will answer all your questions.

From the next video, we will start our new module that is Jquery traversing. It is an important module because we will learn how to handle parent “child” using Jquery. We will learn about the main use of Jquery in the traversing module. So don’t miss this complete module on all the segments related to Jquery Traversing. See you in the next video.