jquery: An explanation of the events in jquery (i)

I've used some of the jquery animations and effects before, but it's not more than 10%, and it's a waste of time-not jquery, but Web resources. Later, I would like to delve into the internal mechanism of jquery, read two times jquery source code, but the consciousness is still bad far, with a lot of great gods (such as Nanyi) understanding there is a big gap. Now build up your knowledge system at 1.1 points, documenting what you've learned and what you understand about jquery.

Interaction between JavaScript and HTML is handled by the event mechanism that is raised when the user and browser manipulate the page. The browser automatically generates an event when a document or some of its elements are changed or manipulated. Of course, these interactions can be done with traditional JavaScript, but the jquery add-on expands the basic event-handling mechanism. jquery not only provides a more elegant syntax for event processing, but also greatly enhances event handling capabilities.

I. Events in jquery

1. Loading the DOM:

timing: in regular JavaScript, the Window.onload method is typically used, whereas in jquery, the $ (document) is used. The Ready () method, by using this method, You can manipulate the DOM to execute the function it binds to when it is loaded into place.

Note the difference between the two methods:

The Window.onload method is executed when all elements in the Web page (including all associated files of the element) are fully loaded into the browser, that is, at which point JavaScript can access any element in the Web page;

$ (document) the Ready () method registers an event handler that can be called when the DOM is fully in place, that is, all the elements of the page are accessible to jquery, but not all of the files associated with those elements have been downloaded.

According to the above description, there is an obvious problem when using the jquery (docum). Ready () method. Because the events registered within the method are executed as soon as the DOM is ready, it is possible that the associated file for the element is not downloaded later. For example, the HTML associated with the image is downloaded and parsed into a DOM tree, but it is possible that the picture is not fully loaded, so attributes such as the height and width of the case are not necessarily valid.

To solve this problem, you can use another method of--load () for page loading in jquery. The load () method binds a handler function in the OnLoad event of the element. If the handler is bound to a Window object, it is triggered after all content (including Windows, frames, objects, images, etc.) is loaded, and the foreign processing function binds to the element, which is triggered when the content of the element is loaded.

The jquery code is as follows:

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

is equivalent to the following code in javascript:

function () {  //code ...  }

Multiple invocations:

　　The Window.onload method cannot be called multiple times because the OnLoad event of JavaScript can only hold a reference to a function at a time, and it will automatically overwrite the previous function with the following function, so even if the window.load in the above code is assigned two times, only the following function will be executed. So if you want to achieve the effect of two function order triggering, you can only use the following method to do it--and then create a new JavaScript method, the JavaScript code is as follows:

function () {  func1 ();  Func2 ();}

This is a good way to solve some problems, but if you have multiple JavaScript files, or if you need to use the Window.onload method for each file in your team development, this approach can be cumbersome.

jquery's $ (document). The Ready () method is a good way to solve this problem--every time you call $ (document). The Ready () method appends new behavior to the existing behavior, which executes sequentially according to the order in which they are registered. For example, the JavaScript code above can be well implemented with jquery:

function func1 () {  //code ... }function  func1 () {  //code ... }// The following jquery code can execute the above two functions sequentially, and if there are other binding onload functions, you can also bind $ (document) like this. Ready (  function() {  func1 ();}); $ (document). Ready (function() {  func2 ();});

shorthand: Several equivalent ways of writing:

$ (document). Ready (function() {   //}) $ (function() {   // code ... })// The default parameter is document$ (). Ready (Fucntion ()  {//code ...})

2, Event binding: The document loading is complete, followed by the element binding event to complete Some operations, the use of the bind () method. The call format for the bind () method is:

Bind (type, [data], FN);

Where type is the event type, including:Click,KeyPress,load,Submit,DblClick,KeyDown,Change ,Resize,MouseEnter,KeyUp,Scroll,Focus,MouseLeave,Blur,unload, or it can be a custom event name. The second parameter is an optional parameter that is passed as an extra data object to the event object as the value of the Event.data property. The third parameter is the handler function used to bind. For a practical example, the following page, click on the "title" link to display the content.

The HTML code is as follows:

<DivID= "Container">  <h4class= "Head">jquery event mechanism</h4>  <Divclass= "Content">jquery is currently the most widely used JavaScript library of functions. According to statistics, the world's top 1 million sites, 46% use jquery, far more than other libraries.  Microsoft even took jquery as their official repository. </Div></Div>

As required, the following steps need to be completed:

(1) Wait for the DOM to load;

(2) Locate the element where "title" is located, and bind the click event;

(3) Find the "content" element and display "content".

Based on the steps of the analysis, write the jquery code as follows:

$ (function () {    $ ("#container h4.head"). Bind ("click", Function () {      $ (this). Next (). Show ();    Get and display the content element    }  })

Of course, you can enhance the effect, and change the type of the binding event, such as the mouse hover to display the "content", the mouse left to hide the "content." The jquery code is as follows:

$ (function() {    $ (function() {      $ (this). Next (). Show ();    // get and display the content element    function () {      $ (this). Next (). Hide ();   })

One thing to know here is that the bind method in jquery can be called multiple times and can be simplified to remove the second bind above.

The next half of the jquery event will be completed tomorrow, including content such as composition events, event bubbling, removal events, and so on.

jquery: An explanation of the events in jquery (i)