Different jQuery APIs to handle different browser events

In today's Web browsers, it is a little difficult to handle events. Different browsers process events in different ways. Therefore, to overcome these cross-browser problems, people can use jQuery's event processing API.

JQuery is a small JavaScript library that provides a wide range of APIs to handle different browser events and effects, and more. Read more about how to process the user interface using a JavaScript browser. In this tutorial, we will explore different API jQuery to handle different browser events.
Page Load event
Ready (FN ),
This is based on the support of jQuery for all types of events. You may want to set the format of focus when the page is loaded or make some UI effects.
Copy codeThe Code is as follows:
$ (Document). ready (function (){
$ ("P"). text ("The DOM is now loaded and can be manipulated .");
});

Event Processing
Binding (type, Data, FN ),
You may want to bind any element that processes one or more events (click/double-click, etc ). Use this function to combine events with any element of custome.
Copy codeThe Code is as follows:
$ ("P"). bind ("click", function (e ){
Var str = "(" + e. pageX + "," + e. pageY + ")";
$ ("Span"). text ("Click happened! "+ Str );
});
$ ("P"). bind ("dblclick", function (){
$ ("Span"). text ("Double-click happened in" + this. tagName );
});
$ ("P"). bind ("mouseenter mouseleave", function (e ){
$ (This). toggleClass ("over ");
});

Trigger (event, document)
Trigger events on each matching element,
This also causes the browser to have the same name (if any) to perform the default operation. For example, triggering () also causes the browser to "Submit" the form ". Returning false default actions that are bound to an event can be prevented.
The events triggered are not limited to browser-based events. You can also customize events to trigger binding registration.
Copy codeThe Code is as follows:
$ ("Button: first"). click (function (){
Update ($ ("span: first "));
});
$ ("Button: last"). click (function (){
$ ("Button: first"). trigger ('click ');
Update ($ ("span: last "));
});
Function update (j ){
Var n = parseInt (j. text (), 10 );
J. text (n + 1 );
}

Interactive activities
In today's Web 2.0 applications, user intraction processing is very important. JQuery provides APIs to process these interactions. Hover (more) This function provides the hover function, that is, when the mouse cursor moves to a matching element, the first specified function is fired. When the mouse moves the element, the second specified function fires. In addition, the check area shows that if the mouse is still in the specified Element (for example, the image in a div), and if so, it will continue to "hover ", there is no migration (a common error in using the mouseout event handler.
Copy codeThe Code is as follows:
$ ("Li"). hover (
Function (){
$ (This). append ($ ("<span> *** </span> "));
},
Function (){
$ (This). find ("span: last"). remove ();
}
);

Other activities
The following are functions that can be used to handle different types of event lists.
Fuzzy ()
: Triggers a blur event for each matching element.
Copy codeThe Code is as follows:
$ ("Input"). blur (function (){
$ (This). next ("span" ).css ('display', 'inline'). fadeOut (1000 );
});
Fuzzy (FN)
: Bind a handler to each blur event that matches the element.
[Code]
$ ("Input"). blur (function (){
$ (This). next ("span" ).css ('display', 'inline'). fadeOut (1000 );
});

(FN)
: Bind a function to the change event of each matching element.
Copy codeThe Code is as follows:
$ ("Select"). change (function (){
Var str = "";
$ ("Select option: selected"). each (function (){
Str + = $ (this). text () + "";
});
$ ("Div"). text (str );
})
. Change ();

Click (FN)
: Bind to the click event of each matching element.
Copy codeThe Code is as follows:
$ ("P"). click (function (){
$ (This). slideUp ();
});
$ ("P"). hover (function (){
$ (This). addClass ("hilite ");
}, Function (){
$ (This). removeClass ("hilite ");
});

Double-click (FN)
: Triggers a DblClick event for each matching element.
Copy codeThe Code is as follows:
Var divdbl = $ ("div: first ");
Divdbl. dblclick (function (){
Divdbl. toggleClass ('dbl ');
});

Button (FN)
: Bind a function to the keypress event of each matching element.
Copy codeThe Code is as follows:
$ ("Input"). keypress (function (e ){
If (e. which = 32 | (65 <= e. which & e. which <= 65 + 25)
| (97 <= e. which & e. which <= 97 + 25 )){
Var c = String. fromCharCode (e. which );
$ ("P"). append ($ ("<span/> "))
. Children (": last ")
. Append (document. createTextNode (c ));
} Else if (e. which = 8 ){
// Backspace in IE only be on keydown
$ ("P"). children (": last"). remove ();
}
$ ("Div"). text (e. which );
});

Mousedown (FN))
: Bind to the mousedown event of each matching element.
Copy codeThe Code is as follows:
$ ("P"). mouseup (function (){
$ (This). append ('<span style = "color: # F00;"> Mouse up. </span> ');
}). Mousedown (function (){
$ (This). append ('<span style = "color: # 00F;"> Mouse down. </span> ');
});

Scroll (FN)
: Bind a handler to each scroll event that matches the element.
Copy codeThe Code is as follows:
$ ("P"). clone (). appendTo (document. body );
$ ("P"). clone (). appendTo (document. body );
$ ("P"). clone (). appendTo (document. body );
$ (Window). scroll (function (){
$ ("Span" ).css ("display", "inline"). fadeOut ("slow ");
});