jquery Common events (grooming)

jquery Events

(a), the list of events.

1.blur () triggers when the focus is lost. Include 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 () is triggered when the element or its child elements get focus, and the focus () differs from the ability to detect the focus of its inner child elements.

8.focusout () triggers when an element or its child element loses focus, and focusout () differs from the ability to detect the loss of focus within the inner child element.

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 window size changes. $ (window). Resize ();

19.scroll () triggers when the scrollbar 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), events commonly used methods

1. Binding Events

Syntax: The bind (TYPE,[DATA],FN) type parameter can be the top 22 methods (note: cannot be enclosed in parentheses); The parameter data is the extra information that the property value passes to the event object, and FN is the handler function. You can bind multiple events, or you can 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-over executes 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 execution of events

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

$ ("#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, which has no effect on other functions if the event is bound to more than one function.

5. One event that only executes once

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

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

6. Events that are automatically executed after trigger DOM is loaded

Syntax: Trigger (Type,[data]) DOM element is automatically executed when loading is complete

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

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

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 the event to the DOM Root ($ (ducoment)), and then compares the elements that trigger the event to determine whether the event should be executed. Inefficient and therefore cannot be completely substituted for bind () but one benefit is that the elements that are loaded later are also bound. One drawback, however, 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 arguments. Whenever an event bubbles onto 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 of ' a ', and if so, executes 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 the late Ajax or JS loaded up, but still valid.

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

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

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

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

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

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

9, delegate () adds 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 () allows time to be bound 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 an event bubbles to $ (' #container '), it checks to see if the event is a click event, and whether the target element of the event matches the CCS selector. If the results of both checks are true, it executes 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 ()