I. Events
1 Loading DOM
Copy Code code as follows:
$ (document). Ready (function () {//...})
After the DOM is loaded, it is executed, distinguished from window.onload=function () {///...} on reusable use.
$ (window). Load (function () {//...})
All objects in the window execute after loading, several equivalent window.onload=function () {//...}. You can also use this method for selector
Another: $ (document). Ready (function () {//...}) Shorthand for: $ (function () {//...}) or $ (). Ready (function () {//...})
2 Event Binding
Copy Code code as follows:
$ ("selector"). Bind ()
Bind event for element, format: Bind (TYPE[,DATA],FN), 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
Shorthand method: $ ("selector"). Bind (Type,function () {//...}) Equivalent to $ ("selector"). Type (function () {//...})
Can pass the data parameter for unbind specific events
$ ("selector"). Is ()
Judging method
(external: Method multiple reuse to define a local variable var $x = $ ("selector"). Method ())
3 Synthetic Events
Copy Code code as follows:
$ ("selector"). Hover (Enter,leave)
Simulates the cursor hover event, triggers the Enter event when the mouse enters, triggers the leave event when the mouse moves (instead of bind ("MouseEnter") and bind ("MouseLeave")
Use Method: $ ("selector"). Hover (function () {//enter case...},function () {//leave case ...})
(Outside: IE6 does not support except the a label outside the CSS: hover pseudo class problem--can use this hover event as hack to solve)
$ ("selector"). Toggle (fn1,fn2,..., FnN)
Simulate a continuous mouse click event and loop through the events in the order in which they are clicked
Use Method: $ ("selector"). Toggle (function () {//case1...},function () {//case2 ...},..., function () {//casen})
Special usage: Toggle element visible state, such as element hiding, click Toggle trigger element to make it visible; element visible, click Toggle trigger element to hide
P108 Example:
Copy Code code 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 Event object: Only within this function can be accessed, the event handler is finished, the object is destroyed
Event.stoppropagation ()
At the end of the function to stop event bubbling
P111 Example:
Copy Code code as follows:
<script>
$ (' span '). BIND ("click", Function (event) {
var txt = $ (' msg '). HTML () + "<p> layer span element clicked </p>";
$ (' #msg '). html (TXT);
Event.stoppropagation ();
})
</script>
Event.preventdefault ()
Block element default behavior
Example: Validating a form (input is null block commit and Prompt)
Copy Code code as follows:
<script>
$ (function () {
$ ("#submit"). Bind ("click", Function (event) {
var username=$ ("#username"). Val ();
if (username== "") {
$ ("#msg"). HTML ("<p> text box value cannot be null </p>");
Event.preventdefault ();
}
});
})
</script>
return false;
Stop bubbling and default behavior on object events, equivalent to simultaneous invocation of stopprapagation () and Preventdefault ()
(external: Event capture and event bubbling are the reverse process, event capture is triggered from the top of the DOM, jquery is not supported, so this book Conlio)
5 Properties of the event object
Event.type
Get Event Type
Cases:
Copy Code code as follows:
<script>
$ ("a"). Click (Function (event) {
alert (Event.type);
return false;
})
</script>
Return "click" Above
Event.target
Gets the element that triggers the event
Cases:
Copy Code code as follows:
<script>
$ ("a[href=http://baidu.com]"). Click (function () {
alert (EVENT.TARGET.HREF);
return false;
})
</script>
Return to "http://baidu.com" above
Event.relatedtarget
Accessing event-related elements
Event.pagex/event.pagey
Gets the x-coordinate and y-coordinate of the cursor relative to the page
Event.which
Gets the left, middle, and right keys of the mouse in the mouse click event; Gets the keyboard key in the keyboard event (return value 1 = left mouse button; 2 = middle mouse button; 3 = right mouse button)
Event.metakey
Get <ctrl> keys in keyboard events
Event.originalevent
Point to the original event object
6 Removal Events
$ ("selector"). Unbind ()
Removes the event on an element, in the format: $ ("selector"). Unbind ([Type][,data]); (if there are no parameters, delete all bound events; If you provide an event type argument, only the binding event of that type is deleted.) If the handler function passed at binding is taken as the second argument, only this particular event handler is deleted.
Cases:
Copy Code code as follows:
<script>
$ (function () {
$ (' #btn '). Bind ("click", Myfun1=function () {//Bind first
$ (' #test '). Append ("...");
});
})
</script>
<script>
$ (' #delOne '). Click (function () {
$ (' #btn '). Unbind ("click", MyFun1); Delete after
})
</script>
$ ("selector"). One ()
Binds an event that is triggered once and is deleted, in the form of $ ("selector"). One (TYPE[,DATA],FN);
7 Analog operations
$ ("selector"). Trigger ("type");
Simulate user interaction Action, abbreviated method: $ ("#selector"). Type (); Format: $ ("selector"). Trigger (Type[,data])
Example: Using a click instead of a mouse
Copy Code code as follows:
<script>
$ ("selector"). MouseOver (function{//...});
$ ("Selector2"). Click (function () {
$ ("selector"). Trigger ("mouseover"); or $ ("selector"). MouseOver ()
})
</script>
Examples of custom events
Copy Code code as follows:
<script>
$ ("selector"). Bind ("Myclick", function () {//...}); Binding Custom Events
$ ("selector"). Trigger ("Myclick"); Triggering custom Events
</script>
$ ("selector"). Trigger (Type[,data])
Can pass arguments to the callback function in array form
P119 Example:
Copy Code code as follows:
<script>
$ ("#btn"). Bind ("Myclick", function (Event,message1,message2) {
$ ("#test"). Append ("<p>" +message1+message2+ "</p>");
});
$ ("#btn"). Trigger ("Myclick", ["My Customizations", "events"]);
</script>
8 Other uses
$ ("selector"). Bind ("type1 type2", function () {//...})
Binding multiple event types at a one-time
P119 is worth a look at the example
Copy Code code as follows:
<script>
$ (function () {
$ ("div"). Bind ("mouseover mouseout", function () {
$ (this). Toggleclass ("over"); Switch class
});
})
</script>
$ ("selector"). Bind ("type. Namespace", function () {//...})
Add event namespaces for multiple events to facilitate management, and after you delete namespaces, the events under the namespace are deleted at the same time, such as:
$ ("div"). Bind ("Mouseover.plugin", function () {//...})
$ ("div"). Bind ("Click.plugin", function () {//...})
$ ("div"). Unbind (". Plugin");
$ ("selector"). Trigger ("type!")
"!" The type method used to select a match that is not included in the namespace
