Analysis of DOM loading and event execution examples in jquery

The interaction between JavaScript and HTML is handled by the events that are raised when the user and the browser manipulate the page. The browser automatically generates an event when a document or some of its elements are changed or manipulated. For example, when a browser finishes loading a document, an event is generated: When a user clicks a button, an event is also generated. Although these interactions can be accomplished with traditional JavaScript events, jquery adds and expands the basic event-handling mechanism. jquery not only provides more elegant event-handling syntax, but also greatly enhances event-handling capabilities.

As an example of a browser loading document, the browser adds events to the DOM element through JavaScript after the page is loaded. In regular JavaScript code, the Window.onload method is usually used, whereas in jquery, the $ (document) is used. Ready () method. $ (document). The Ready () method is one of the most important functions in the event module, which can greatly improve the response speed of the Web application. jquery uses the $ (document). Ready () method instead of the traditional JavaScript window.onload method. By using this method, you can manipulate the DOM when it is loaded and invoke the function to which it is bound. In the course of use, note the $ (document). The nuances between the ready () method and the Window.onload method.

Timing of execution

$ (document). The Ready () method and the Window.onload method have similar functions, but there are differences in the timing of execution. The Window.onload method executes when all the elements in a Web page (including all associated files of the element) are fully loaded into the browser, that is, JavaScript can access any element in the Web page at this time. The event handlers that are registered through the $ (document). Ready () method in jquery can be invoked when the DOM is fully ready. At this point, all elements of a Web page are accessible to jquery, but that does not mean that the files associated with those elements are already downloaded.

For example, there is a large gallery web site that adds some behavior to all the pictures in a Web page, such as clicking a picture to hide or display it. If you use the Window.onload method to deal with, then the user must wait for the sword each picture is loaded, before they can operate. If you use the $ (document). Ready () method in jquery, you can do so as long as the DOM is ready and you don't have to wait for all the pictures to download. Obviously, parsing a Web page into a DOM tree is faster than loading all of the associated files in the page.

In addition, it is important to note that because the events registered within the $ (document). Ready () method are executed as long as the DOM is ready, it is possible that the element's associated file is downloaded at the end of this time. For example, a picture-related HTML download is complete and has been parsed into a DOM tree, but it is likely that the picture has not yet been loaded, so properties such as the height and width of the picture are not necessarily valid at this time. To work around this problem, you can use another method in jquery about page loading--load () method. The load () method binds a handler function in the OnLoad event of the element. If the handle function is bound to the Window object, it fires after all content (including Windows, frames, objects, images, and so on) is loaded, and if the processing function is bound to the element, it is triggered after the element's contents have been loaded. The jquery code is as follows:

1 2 3

$ (window). Load (function () {//write code})

Equivalent to the following code in javascript:

1 2 3

Window.onload = function () {//write code})

Now explain in detail the difference between the Windows.onload method and the $ (document). Ready () Method:

Assuming there are two functions in the Web page, the JavaScript code is as follows:

1 2 3 4 5 6

function one () {alert ("one");} function two () {alert ("two");}

When the page is loaded, call the one and two functions by using the following JavaScript code:

1 2	Window.onload = one; Window.onload = two;

However, when you run the code, you find that only the string "Two" dialog box pops up. The reason that the string "One" dialog box cannot be ejected is that the onload event of JavaScript can only save a reference to a function at a time, and it automatically overwrites the previous function with the following function, so you cannot add new behavior to the existing behavior.

To achieve the effect of two function sequential triggers, only a new JavaScript method can be created to implement the JavaScript code as follows:

1 2 3 4

Window.onload = function () {one (); two ();}

While writing code can solve some of the problems, but it still doesn't meet certain requirements, such as having multiple JavaScript files, each of which requires a window.onload method, writing code in the way mentioned above can be cumbersome. And jquery's $ (document). Ready () method handles these situations well, each time the $ (document) is invoked. The Ready () method appends new behavior to existing behaviors, which are executed sequentially, according to the order in which they are registered. For example, the following jquery code:

1 2 3 4 5 6 7 8 9 10 11-12

function one () {alert ("one");} function two () {alert ("two");} $ (document). Ready (function () {one ();}) $ (document). Ready (function () {two ();});

After the code is run, the string "One" dialog box pops up and the string "Two" dialog box pops up.

Take a look at the time elapsed between ready () and onload ():

jquery's ready () time consuming: 498 ms

Shorthand method

Above we ready the function to write this:

1 2 3

$ (document). Ready (function () {//write code})

You can also abbreviate this:

1 2 3

$ (function () {//write code})

In addition, $ (document) can also be abbreviated to $ (). When $ () has no parameters, the default argument is "document", so it can be abbreviated as:

1 2 3

$ (). Ready (function () {//write code})

3 ways are the same function, the reader can according to their own preferences, choose one of them.