jQuery DOM Events part1

Hello guys, welcome to our series jQuery.

In the previous segment, we covered form related events of jQuery in which all the events attached with the forms, or mostly with the control of forms, like blur, focus, select, change and submit. We covered all this in the previous segment.

If you have come across Today’s segment focuses on Document and Windows related events. There are some events of Documents and there are some events of Windows.

Here in this slide a simple line is written that all the events we are going to study today are mostly Document related.

When are they executed? Means, when we load our web page in our browser, when we close the tab in the browser, when we resize the browser window with the help of mouse then our Document related and Window related events are used. Here, the mixture of all three events, two events is written. Means, they are not in order.

Like load, unload are Document related. Bind is also Document related. Resize is window related. So these are our methods which we are going to cover in today’s segment.

Firstly, we’ll see a load event. Load, as per the name it is used when our web page is loaded. Means, it will not be attached with a blank web page. There are so many things on the web page which have been loaded. Like image is loaded, script is loaded, frame is loaded, iframe is loaded. Means, whatever things we are loading inside our web page that is attached with our load event.

If I want to perform a task like this, let’s say my iframe is loaded. Now I want to perform a task as soon as my iframe is loaded, then we have to attach load with it. If I have taken an image and I’ve to do some work with the image then I’ll attach this load event with that. Means, if I want to fire any event, while the thing is still loading, then I can attach it with load event.

The syntax is simple, as there were mouse related events and keyboard events like that we’ll add our load function. In the case of load function, it is not optional. In our previous methods, there were a lot of places where function was optional but from now on function is not optional. It is essential in load, meaning it is mandatory because we have to perform some action with it.

In the example of load, we have taken an iframe. When the  iframe is loaded then we have to simply alert it that the iframe is loaded. So how will we do it? Let’s say, I’ll open sublime text, here I’ve set it as HTML….

Example…. load. Here we’ll add our E library….. This is my script. ( 7 seconds pause, typing)  We’ll write here.

And after our script, style….

In our body, I’ll take a… text align centre…. Here, “H one” tag… . Example load. Now let’s say what I have to do in this program. So let’s say, I’ve written a related iframe. So when my iframe is loaded then I’ve to fire something. For example, we simply have to show an alert box, that when our iframe is loaded then the alert box has to do its job. So here I’ll take an iframe. What should I write in source? Then let’s say, I take LearnVern. It is proper that when we go to Google, in our browser and after going in the browser we’ll write LearnVern. When I’ll copy it from here.

And then I’ll paste it here. Then you can see the complete path is shown here. Means, whenever I’ll  go inside this iframe, then what is going to load is, this page of LearnVern. Okay.

So now my LearnVern page is loaded and now we have to simply apply load. So I’ll click on this iframe. Dollar… iframe dot… load function which is essential. And in this we’ll give an alert….

Iframe loaded….

Let’s save this program with the same name as load. Now let’s run this program and see if it executes properly or not….

So this is my program. As you can see it is loaded in our iframe. I’ll reload the program again. So it has been loaded now. Means, this small iframe that you can see is loaded but we are not able to see our alert box. I’m reloading my page again. As you can see we cannot see any alert box here.

Means, there’s one thing which we have missed in our program.

This is our program. And as you can see the spelling of ready is written wrong. So as soon as I’ve added A here, saved it and loaded it. I’ll press F five…

You can see as soon as my web page is added in my iframe, this pop up is coming. Let’s say I give this iframe width etc.

Width… one thousand…..

Five hundred….Save...

So as you can see, my LearnVern screen, complete URL is loaded in our iframe. But as soon as it is loaded my alert box pops up. If you see the timing, then, my page is loading first in the I frame and then the alert box pops up. Let me reload it again. As you have seen after the complete screen of LearnVern is loaded, the message comes up iframe loaded. So this is a very important thing.

Why? You must have seen in a lot of places that the circle keeps rotating until the loading is not finished. Means, we can do this with the help of load method. Until our loading is finished, we can show the circle there. As soon as the loading is finished, means when my page is properly loaded or when my data is properly loaded after then we can remove that circle. This is a premiere type example. As you have seen in a lot of places on our websites that until a relevant data comes, a GIF keeps on rotating that data is loading. So that we can show it here.

Let’s proceed to our next method. After load, the next document related event is the unload method. Unload method, means once my page is downloaded and after that if I want to do something means, for the removal of it. If I have a content in my document and I have to remove it, how will I do it? I’ll do that on unload.

Means, “the jQuery unload method is used to unload a specific event”. Means, when my event is unloaded then the case of unload is something like unload event is sent to the window element when the user navigates away from the page. Means, if we take this example then my current page is load HTML. If I redirect it to some other page using load then my unload is executed.

But, here is our syntax unload, here the function is essential but there are some more things related to unload which we have to note down like trigger unload. When “unload is triggered?

“Click in a link which loads to leave the page”. Means, when we click on a link then unload is fired. Second, to click on the forward or backward button means to click on these forward or backward buttons. At the time of adding a new URL in the address bar. Then it closes the browser window. Reload the page. Then our unload is triggered but unload is triggered very quickly that’s why it is difficult to capture it.

For example, we wrote goodbye when the page was being unloaded and here something is written that says when can we trigger it. Lets say, we have this load program, I’ll paste it here.

Okay. Now I’ll write unload here…. Here also  let me write unload. Alert iframe…. unloaded…..

Unload. Let us save this program by the name unload. Now let us run this program…. So this is my program here.

 Now what’s happening here is, when I unload this program then. So what steps were there? One, when I unload this program then. When we remove” in “forward backward” then. When we close the browser window then or when we reload it then.

Let's say I reload this program. As you can see my page is reloaded but I’ve attached an unload here. Alert. So that an alert box pops up but it doesn't come up.

Again, next we have to close the browser window. Let's say I close this program. So as you can see, still my alert didn’t come. Next, let me write this program again and run it. My program has been run. Now the third we can do with this is type a new URL. So lets say I write a new URL within this… LearnVern dot com…. Okay….

So as you can see I clicked on LearnVern and my circle is rotating for LearnVern. But till now, the alert box didn’t come. As you can see, the alert box is not shown. Means, instead of following steps that are written here, the actions that should’ve been performed are not being done.

What does this indicates? It indicates that we are not able to identify whether it's working properly or not. This is our console. Let's say I go back to this program again. My alert hasn't come yet. Let's say instead of this alert I write one more thing with this… console log….

Unload….

I’ll comment on this. Save. Program refresh. Now again I’ll open a console. There’s nothing in the console now. Nothing  is written. This is a console. Clear.

Now I’ll write “LearnVern”  here. Now as you see it is redirected in LearnVern but nothing came up in the console. Still nothing was seen here when I took “unload. Means unload exists a method in jQuery but its output is not triggered. We did various trials to perform it but the actions attached by “unload” are not being performed. So we can count this as a limitation. If you want to perform any action by using unload then you can do it but there’s a question that will be triggered or not. Because we are trying it but it is not executed. So you can count this as a limitation of “unload”.

After unload” then the next method that comes is, delegate. Delegate is very important because let’s see the use of delegate first. Sometimes, when we have to fire any event, it means I want to have the same block copied as it is. But I also want to copy the events attached with it. Can you understand it?

Means, not only I want to copy the output but I also want to copy the code with it. If I have copied block division then all the methods related to division and all the events attached to it should also have to be copied. So for that we have to use the delegate method.

Delegate method is used to attach one or more event handlers for specified elements which are the children of selected elements. Means, what it will do is, it will create a child of the particular division or element in which the delegate event is being used. And the child will also be attached to events which are attached to our current, which is generated by clicking it or firing any event.

It is a little tricky to understand it but it will be more clear with the help of an example.

Here as you can see the syntax. In syntax , we have written “delegate'' and there are a lot, in comparison to previous examples as we have seen there a lot of parameters and elements like child selector, event dot etc. So here child selector, which is mandatory means, used to specify one or more child elements to attach. If I have a child, then it is necessary to tell that child. So here the child that will come is P, here will come H one. Here,  will come “division” means any one element will come here.

Not only elements, class can also come. Dot class or hashtag ID can also come. Even if it is mandatory it specifies one or more events that means what we have to do in order to create a child. Means, when I click it then my event is fired, when I blur it then my event is fired, when I submit it then my event is fired. So what we have to do here. Means, we also have to show the event.

Data part is optional, the function tells us what actions we have to perform. Let us see an example of it. Let’s say, I click anywhere in the body. Means, if I click anywhere in the body a P tag should be generated which will become the child of the body. What does delegate do, is to create the child. So if I click anywhere in the body then a P should be generated.

When? On clicking the body and what that P should be? So it is the function who decides what should happen.

So the P will be attached inside the function and that statement will be this.

“Click and a new statement will be added”, meaning, whatever things that we have attached with the body, the events that are attached with the events that will also be applied on P.

As I have said before, this is the work of a delegate. It creates a child plus it also appends all the events related to its parent and connects it. So by clicking it in our body, P is being generated then by clicking P another P will be generated. Again P will be generated by clicking P.

So this will be our program.

Let’s do it practically so that it is more clear. So let me open a Sublime text here. Sublime text is already open. Okay. I’ll copy and paste this unload. And I’ll apply some mandatory changes here like this is our delegate. This is a very important method guys so understand it carefully. Here will come the delegate and here nothing. So basically, what I am doing in this program is, we are delegating the p tag of the body so that some new child elements are generated. So how will we do it? So here I would at least need one P tag to do this so let’s say we take a P tag here. “This is ( 6 seconds pause, typing)  LearnVern”….

Click to get the message. Okay….

Let us save our program by the name of the delegate….. 

And let us run this program…..

So as you can see here. This is LearnVern. Click to get the message. Means, nothing will get affected now, because we have given nothing here. But let’s say, whenever I click on this then some messages are generated here plus not only that, it starts when I click here. Means, the message that will come after this should also come here because what does delegate do is, whatever events that we have applied on parents are also applied on the child.

So inside the body, wherever, P is, that is my P. We’ll write in this way by adding commas.

After clicking P we have to apply the effect event. So here will come our click inside quotes. Now will come the function. This indicates, when we click the P inside the body then its function should be fired. So you can understand it in this way. I’m repeating again, clicking inside the body, this function should be fired. This understanding should be there.

So what will happen? So it is now in body and in body only we have to add our new P so you can either write this or you can write the body. But I’ll write this. This dot.., we have to add inside our body so here we’ll use “after. So if you want to see after then we have already seen this in our previous video in HTML, jQuery HTML. That when we have to add a new P inside this body like this dot P and in P…. “LearnVern is awesome…”.

Okay. So this is our delegate. Let’s run this program after saving it.

Now when I click on this message, then it is showing, click to get this message means LearnVern is awesome. So if I click on this or any of these messages then it will keep on adding because we have used “delegate.

What does the delegate do? It not only gives us the result once but also the events that we have applied here. It also applies to its child. Means, the click event that I applied on the first P that is applied on its child too. If I inspect it… so you can see it is added to our body.

Okay, means they are “child” of the body.

So this is our delegate method. Our click is not identified above P. So what we can do here is P cursor pointer background light coral. So as you can see when I move it above, so cursor. Cursor is an indication that when I click here, it will give us the messages. That’s why I did  it with a cursor. Cursor, cursor, cursor. So wherever I click, means if you understand the basic meaning of delegate is, those events which are on parent, those events should also be applied on the child. Then only we’ll use “delegate. This is a document method.

 If you come across any query, question or doubt related to today’s segment then you can tell us at forums dot LearnVern dot com, we’ll give solutions to all your questions. Discussion to be added

In the next segment, we’ll continue the documents and windows events. We’ll stop at today’s segment and we’ll continue the remaining in next segment. So thank you.