Sharp jQuery key points (3) Events and animations in jQuery (Part 1: events)

I. Events

1. Load DOM

Copy codeThe Code is as follows:
$ (Document). ready (function (){//...})
After the DOM is loaded, it is executed in a way different from window. onload = function (){//...}
$ (Window). load (function (){//...})
After all objects in the window are loaded, execute the command, which is equivalent to window. onload = function (){//...}. You can also use this method for selector.

Another: $ (document ). ready (function (){//...}) in short: $ (function (){//...}) or $ (). ready (function (){//...})

2 event binding

Copy codeThe Code is as follows:
$ ("Selector"). bind ()
Bind events to elements. Format: bind (type [, data], fn). It can be called multiple times.
Type event types include: blur, focus, load, resize, scroll, unload, click, dbclick, mousedown, mouseup, mousemove, mouseover, mouseout, mouseenter, mouseleave, change, select, submit, keydown, keypress, keyup, error, or custom event
Abbreviation: $ ("selector "). bind (type, function (){//...}) equivalent to $ ("selector "). type (function (){//...})
Data parameters can be passed for unbind-specific events.
$ ("Selector"). is ()
Judgment Method

(External: The method can be reused multiple times to define the local variable var $ x = $ ("selector"). Method ())

3 merging events
Copy codeThe Code is as follows:
$ ("Selector"). hover (enter, leave)
Simulate the cursor hover event. When the mouse enters, the enter event is triggered. When the mouse moves out, the leave event is triggered (instead of bind ("mouseenter") and bind ("mouseleave "))
Usage: $ ("selector"). hover (function () {// enter case...}, function () {// leave case ...})
(In addition, IE6 does not support the hover pseudo class of css except the tag-This hover event can be used as a hack to solve)
$ ("Selector"). toggle (fn1, fn2,..., fnN)
Simulate continuous Mouse clicking events and execute events cyclically in order of clicks
Usage: $ ("selector "). toggle (function () {// case1 ...}, function () {// case2 ...},..., function () {// caseN })
Special usage: Switch the visible state of an element. For example, if the element is hidden, click the toggle trigger element to make it visible. If the element is visible, click the toggle trigger element to hide it.

P108 example:
Copy codeThe Code is as follows:
<Script>
$ (Function (){
$ ("Panel h5.head"). toggle (function (){
$ (This). next (). toggle ();
}, Function (){
$ (This). next (). toggle ();
})
})
</Script>

4 event bubbling

$ ("Selector"). bind ("type", function (event) {// event: event object ...})
Event object: only this function can be accessed internally. After the event processing function is executed, the event object will be destroyed.
Event. stopPropagation ()
Stops event bubbles at the end of the Function
P111 example:
Copy codeThe Code is as follows:
<Script>
$ ('Span '). bind ("click", function (event ){
Var txt = ('msg'{.html () + "<p> the inner span element is clicked </p> ";
('{Msg'}.html (txt );
Event. stopPropagation ();
})
</Script>
Event. preventDefault ()

Block default behavior of Elements
Example: Verification Form (input is empty to prevent submission and prompt)
Copy codeThe Code is as follows:
<Script>
$ (Function (){
$ ("# Submit"). bind ("click", function (event ){
Var username = $ ("# username"). val ();
If (username = ""){
$ ("# Msg" cmd.html ("<p> the value of the text box cannot be blank </p> ");
Event. preventDefault ();
}
});
})
</Script>

Return false;
Both stop bubbling and default behavior for Object events. It is equivalent to calling stopPrapagation () and preventDefault () at the same time ()
(In addition, event capture and event bubbling are the opposite processes. Event capture starts from the top of the DOM and is not supported by jQuery. Therefore, this book is omitted)

5. Attributes of event objects

Event. type
Get Event Type
Example:
Copy codeThe Code is as follows:
<Script>
$ ("A"). click (function (event ){
Alert (event. type );
Return false;
})
</Script>

Click is returned"
Event.tar get
Get the trigger event Element
Example:
Copy codeThe Code is as follows:
<Script>
$ ("A [href = http://baidu.com]"). click (function (){
Alert(event.tar get. href );
Return false;
})
</Script>

Returns "http://baidu.com"
Event. relatedTarget
Elements related to access events
Event. pageX/event. pageY
Returns the x and y coordinates of the cursor over the page.
Event. which
Click the left, right, and right mouse buttons of an event. In a keyboard event, click the buttons of the keyboard (return value 1 = left mouse button; 2 = middle mouse button; 3 = right mouse button)
Event. metaKey
Obtain the <ctrl> key in the keyboard event
Event. originalEvent
Point to the original event object

6. Remove events

$ ("Selector"). unbind ()
Removes an event from an element in the format of $ ("selector "). unbind ([type] [, data]); (if no parameter exists, all bound events are deleted. If event type parameters are provided, only binding events of this type are deleted; if the handler passed during binding is used as the second parameter, only this specific event handler will be deleted)
Example:
Copy codeThe Code is as follows:
<Script>
$ (Function (){
$ ('# Btn'). bind ("click", myFun1 = function () {// bind first
$ ('# Test'). append ("...");
});
})
</Script>
<Script>
$ ('# Delone'). click (function (){
$ ('# Btn'). unbind ("click", myFun1); // delete it later
})
</Script>

$ ("Selector"). one ()
Bind an event that is triggered once and is deleted. Format: $ ("selector"). one (type [, data], fn );

7. Simulated operations

$ ("Selector"). trigger ("type ");
Simulate user interaction, abbreviated as $ ("# selector"). type (); format: $ ("selector"). trigger (type [, data])
For example, click to replace the mouse
Copy codeThe Code is as follows:
<Script>
$ ("Selector"). mouseover (function {//...});
$ ("Selector2"). click (function (){
$ ("Selector"). trigger ("mouseover"); // or $ ("selector"). mouseover ()
})
</Script>

Examples of custom events
Copy codeThe Code is as follows:
<Script>
$ ("Selector"). bind ("myClick", function () {//...}); // bind a Custom Event
$ ("Selector"). trigger ("myClick"); // triggers a Custom Event
</Script>
$ ("Selector"). trigger (type [, data])

Parameters can be passed to the callback function in arrays.
P119 example:
Copy codeThe Code is as follows:
<Script>
$ ("# Btn"). bind ("myClick", function (event, message1, message2 ){
$ ("# Test"). append ("<p>" + message1 + message2 + "</p> ");
});
$ ("# Btn"). trigger ("myClick", ["my custom", "Event"]);
</Script>

8 other usage

$ ("Selector"). bind ("type1 type2", function (){//...})
Bind multiple event types at a time
P119 example worth reading
Copy codeThe Code is as follows:
<Script>
$ (Function (){
$ ("Div"). bind ("mouseover mouseout", function (){
$ (This). toggleClass ("over"); // switch the class
});
})
</Script>

$ ("Selector"). bind ("type. namespace", function (){//...})
Add an event namespace for multiple events to facilitate management. After a namespace is deleted, all events in the namespace are deleted at the same time, for example:
$ ("Div"). bind ("mouseover. plugin", function (){//...})
$ ("Div"). bind ("click. plugin", function (){//...})
$ ("Div"). unbind (". plugin ");
$ ("Selector"). trigger ("type! ")
"! "Used to select the type method that matches a namespace that is not included in the namespace