jquery frequently uses events (grooming)

jquery Events

(a), the list of events.

1.blur () triggers when the focus is lost. Contains mouse click to leave and tab key to leave.

2.change () When the element gets the focus, the value changes the focus thing trigger.

3.click () triggers when the mouse is clicked.

4.dblclick () triggers when the mouse double-clicks.

5.error () triggers when JavaScript is wrong or if the SRC attribute of img is invalid.

6.focus () triggers when the element acquires focus. Note: Some objects are not supported.

7.focusin () triggers when an element or its child elements get focus, and the focus () differs from the case where the inner child element can be checked for focus.

8.focusout () When an element or its child element loses focus, the difference from focusout () is that it is possible to detect a situation in which the inner child element loses focus.

9.keydown () triggers when the keyboard is pressed.

10.keyup () triggers when the key is released.

11.mousedown () triggers when the mouse clicks on the element.

12.mouseenter () triggers when the mouse crosses the element. The difference between MouseEnter and mouseover is that the mouse is triggered when it crosses the mouseover child element and MouseEnter not.

13.mouseleave () triggers when the mouse moves out of the element.

14.mousemove () triggers when the mouse moves over an element: ClientX and. Clienty represent the x-coordinate and y-coordinate of the mouse, respectively.

15.mouseout () triggers when the mouse moves away from the element.

16.mouseover () triggers when the mouse is moved into the element.

17.mouseup () triggers when the left mouse button is pressed to release.

18.resize () triggers when the browser form size changes. $ (window). Resize ();

19.scroll () triggers when the scroll bar changes.

20.select () triggers when content in input is selected.

21.submit () submits the selected form.

22.unload () triggers when the page is unloaded.

(ii) frequent use of events

1. Binding Events

Syntax: Bind (TYPE,[DATA],FN) type parameters can be the top 22 methods (note: no parentheses); The parameter data is the extra information that the property value passes to the event object, and FN is the handler function. Ability to bind multiple events, and to bind multiple functions for the same event.

$ ("#div1"). Bind ("Change", function () {alert ("Hello!"). "); })

$ ("#div1"). Bind ("Click Mouseout", function () {alert ("Hello!"). "); })

2. Switching events

Syntax: hover (FN1,FN2); Mouse moves to run the first function, and the mouse moves out of the second function. Equivalent to MouseEnter and MouseLeave.

$ ("#div1"). Hover (function () {alert ("Mouse Over Me"),},function () {alert ("Mouse out of Me!");})

3. Sequential Run events

Syntax: Toggle (Fn1,fn2,fn3 ...) When the mouse is clicked, run the bound event in turn

$ ("#div1"). Toggle (function () {alert (1);},function () {alert (2);},function () {alert (3);})

4. Unbind Remove Event

Syntax: Unbind ([TYPE],[FN]) removes an event that an element is already bound to, type: Specifies the event to remove, and fn Specifies the method to remove. When there are no parameters, all events are removed. Note that the method of binding with the live () method cannot be removed, and the live () binding method is removed using its own die ().

$ (": Button"). Unbind (); Removes all events from the button.

$ (": Button"). Unbind ("click"); Removes the button's Click event.

$ (": Button"). Unbind ("click", Fn1); Removes the FN1 function from the button's Click event, assuming that the event is bound to multiple functions and has no effect on other functions.

5. One event that runs only once

Syntax: one (TYPE,[DATA],FN) binds an event that runs only once

$ ("#div1"). One ("click", Function () {alert ("I run only once!");})

6, trigger DOM loading completed its own initiative to run the event

Syntax: Trigger (Type,[data]) DOM elements are loaded and run on their own

$ ("#div1"). Bind ("Bclick", function () {alert ("Hello");});

$ ("#div1"). Trigger ("bclick"); Note that the trigger must be placed after the bound event, otherwise it will not run.

7. Live () Dom root node binding event

Syntax: Live (TYPE,[FN]) string,function

Live (Type,[data],false) String,array,bool

Live () binds events at the root node, bubbles through events to the DOM root node ($ (ducoment)), and then infers whether the event should run against the element that triggered the event. Inefficient, and therefore cannot be completely substituted for bind () but there is an advantage, that is the post-loaded elements of the same can be bound. But one drawback is that the live () method can only use the CSS selector to select the bound element.

such as $ (' a '). Live (' click ', function() {alert ("Hello!");}) jquery binds the alert function to the $ (document) element and uses ' click ' and ' a ' as the parameters. Whenever an event is only bubbled up to the document node, it checks to see if the event is a click event, and whether the target element of the event matches the CSS selector ' a ', assuming it is, to run the function.

Live (TYPE,DATA,FN)

$ ("#div1"). Live ("Click", Function () {alert ("Hello");}) Even if the page does not exist at the beginning of the id= "Div1" element, is late Ajax or JS loaded up, but still valid.

$ ("#div1"). Live ("Click Mouseout", function () {alert ("Hello");}) Ability to live () multiple events.

8, Die () to release the Live () method binding event//binding and cancellation is appropriate, die () can not remove bind () and delegate binding method. The ability to live multiple events for an element, or to live multiple functions for the same event.

Syntax Die (TYPE,[FN]) A string function in which the function is an optional method.

$ ("#div1"). Die ();

$ ("#div1"). Die ("click");

$ ("#div1"). Die ("click", Fn1); The fn1 is a function name. Assume that the binding is an anonymous function, and the second parameter is used when multiple functions are live for the same event, and releasing a function has no effect on other functions.

9. Delegate () joins one or more events for the specified element and binds the handler function, and an event can also bind multiple functions. Note: This function is to be added in version 1.4.2. Delegate () agrees to bind time to elements in the parent element that are not yet in the current page, similar to Live (), but even $ (document). Delegate () is also more efficient than the live () method, plus delegate () You can also bind an element that is not yet present to a parent element that is closer to it.

Grammar:

Delegate (SELECTOR,[TYPE],FN) string string Function//selector must be a child element of the selected element

Delegate (SELECTOR,[TYPE],[DATA],FN) string string Object Function

Delegate (selector,events) string string

Such as:

$ (' #container '). Delegate (' A ', ' click ', function () {alert ("Hello!")});
The jquery scan document looks for $ (' #container ') and binds the alert function to $ (' #container ') using the Click event and the CSS selector ' a ' as a parameter. Whenever only an event bubbles to $ (' #container '), it checks to see if the event is the click event, and whether the target element of the event matches the CCS selector. Assuming both checks are true, it runs the function.

$ ("#div1"). Delegate ("#button1", "click", Function () {alert ("Hello!").　　"); }); Note: #button1必须为 child elements of #div1

10, undelegate () Delete one or more event handlers with delegate () function bindings

Grammar:

Undelegate (Selector,[type]) string string

Undelegate (SELECTOR,[TYPE],FN) string string Function

Undelegate (selector,events) string string

Undelegate (namespace) String

11. Ready () Bind handle event when DOM element is loaded

$ (document). Ready ()

jquery frequently uses events (grooming)