Jquery common events and jquery events

Jquery common events and jquery events

Jquery events

(1) event list.

1. blur () is triggered when the focus is lost. Including clicking the left button and clicking the TAB key to exit.

2. change () when the element gets the focus, the value change is triggered when the focus is lost.

3. click () triggered when the mouse clicks.

4. dblclick () is triggered when you double-click the mouse.

5. error () is triggered when a javascript error occurs or the src attribute of img is invalid.

6. focus () is triggered when the element obtains the focus. Note: Some objects are not supported.

7. focusin () is triggered when an element or its child element obtains the focus. The difference between focusin () and focusin is that it can detect the situation in which its child element obtains the focus.

8. focusout () is triggered when the element or its child element loses focus. The difference between focusout () and focusout () is that it can detect internal child elements that lose focus.

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

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

11. mousedown () is triggered when the mouse clicks on the element.

12. mouseenter () is triggered when the mouse is worn over the element. The difference between mouseenter and mouseover is that when the mouse is worn out from the child element of mouseover, it will also be triggered, but mouseenter will not.

13. mouseleave () is triggered when the mouse moves from the element.

14. mousemove () is triggered when the mouse moves over the element .. ClientX and. clientY represent the X and Y coordinates of the mouse respectively.

15. mouseout () is triggered when the mouse moves from the element.

16. mouseover () is triggered when the mouse moves into the element.

17. mouseup () is triggered when the left mouse button is pressed for release.

18. resize () is triggered when the browser window size changes. $ (Window). resize ();

19. scroll () is triggered when the scroll bar changes.

20. select () is triggered when the content in input is selected.

21. submit () submits the selected form.

22. unload () is triggered when the page is uninstalled.

 

(2) common event Methods

1. Bind events

Syntax: bind (type, [data], fn) the type parameter can be 22 Methods on the top (Note: brackets are not allowed ); parameter data is the extra data that the property value passes to the event object, and fn is the processing function. You can bind multiple events or bind multiple functions to the same event.

$ ("# Div1"). bind ("change", function () {alert ("Hello! ");})

$ ("# Div1"). bind ("click mouseout", function () {alert ("Hello! ");})

2. Switching events

Syntax: hover (fn1, fn2); move the cursor to execute the first function, and move the cursor to execute the second function. It is equivalent to mouseenter and mouseleave.

$ ("# Div1"). hover (function () {alert ("Move your mouse to me") ;}, function () {alert ("Move your mouse away from me! ");})

3. sequential execution events

Syntax: toggle (fn1, fn2, fn3.) execute binding events one by one when you click the mouse.

$ ("# Div1 "). toggle (function () {alert (1) ;}, function () {alert (2) ;}, function () {alert (3 );})

4. unbind removal event

Syntax: unbind ([type], [fn]) removes events that have been bound to an element. type: Specifies the event to be removed and fn specifies the method to be removed. If no parameter exists, all events are removed. Note that the method bound with the live () method cannot be removed, and the method bound with the live () method must be removed with its own die.

$ (": Button"). unbind (); remove all events of the button.

$ (": Button"). unbind ("click"); click the event of the Remove button.

$ (": Button "). unbind ("click", fn1); click the fn1 function in the event of the Remove button. If the event is bound to multiple functions, it does not affect other functions.

5. Only one event is executed.

Syntax: one (type, [data], fn) binds an event that is only executed once.

$ ("# Div1"). one ("click", function () {alert ("I only run once! ");})

6. Events automatically executed after the trigger DOM is loaded

Syntax: trigger (type, [data]) automatically executed after the DOM element is loaded

$ ("# Div1"). bind ("bclick", function () {alert ("hello ");});

$ ("# Div1"). trigger ("bclick"); // note that the trigger must be placed after the Bound event; otherwise, the trigger 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 an event to the root node, bubbles the event to the DOM root node ($ (ducoment), and compares the elements that trigger the event to determine whether the event should be executed. Low efficiency, so it cannot completely replace bind (), but there is a benefit that later loaded elements can also be bound. However, the live () method can only use the CSS selector to select the bound element.

For example, $ ('A'). live ('click', function () {alert ("Hello! ");}) JQuery binds the alert function to the $ (document) element and uses 'click' and 'A' as parameters. Whenever an event bubbles to the document node, it checks whether the event is a click event and whether the target element of the event matches the 'A' CSS selector, if all are used, the function is executed.

Live (type, data, fn)

$ ("# Div1 "). live ("click", function () {alert ("hello") ;}) // even if the page does not contain the id = "div1" element at the beginning, it is loaded by AJAX or js later, but it is still valid.

$ ("# Div1"). live ("click mouseout", function () {alert ("hello") ;}) // multiple events can be live.

8. events associated with the release of the live () method by the die () method // the events associated with the release of the bind () method cannot be removed by the die () method. You can live multiple events for one element or multiple functions for the same event.

Syntax: die (type, [fn]) string Function. Function is an optional method.

$ ("# Div1"). die ();

$ ("# Div1"). die ("click ");

$ ("# Div1"). die ("click", fn1); // fn1 indicates a function name. If an anonymous function is bound, the second parameter is used to remove a function without affecting other functions when multiple functions are live for the same event.

9. delegate () adds one or more events to the specified Element and binds the handler function. An event can also be bound to multiple functions. Note: This function must be added to version 1.4.2. Delegate () allows a parent element to bind time to elements not yet on the current page. This is similar to Live (), but even $ (document ). delegate () is more efficient than the live () method. In addition, delegate () can bind unused elements to the parent element closer to it.

Syntax:

Delegate (selector, [type], fn) String Function // selector must be a child element of the selected Element

Delegate (selector, [type], [data], fn) String Object Function

Delegate (selector, events) String

For example:

$ ('# Iner'). delegate ('A', 'click', function () {alert ("Hello! ")});
JQuery scans the document for $ ('# iner') and binds the alert function to $ ('# iner') using the click Event and the 'A' CSS selector as parameters. Whenever an event bubbles to $ ('# iner'), it checks whether the event is a click event and whether the target element of the event matches the CCS selector. If both checks are true, It executes the function.

 

$ ("# Div1"). delegate ("# button1", "click", function () {alert ("Hello! ") ;}); // Note: # button1 must be a child element of # div1

10. undelegate () deletes one or more Event Handlers bound to the delegate () function.

Syntax:

Undelegate (selector, [type]) String

Undelegate (selector, [type], fn) String Function

Undelegate (selector, events) String

Undelegate (namespace) String

11. ready () bind the Processing Event After the DOM element is loaded.

$ (Document). ready ()

How to execute a jquery event

One (type, [data], fn)
Overview
Bind a one-time event handler function for a specific event (such as click) Matching Element.

On each object, this event processing function is executed only once. Other rules are the same as those of the bind () function. This event handler receives an event object, which can be used to prevent (browser) default behavior. If you want to cancel the default action and prevent event bubbles, the event handler function must return false.

In most cases, the event handler function can be defined as an anonymous function (see example 1 ). When it is impossible to define an anonymous function, an optional data object can be passed as the second parameter (while the event processing function is used as the third parameter). See example 2.

Parameters
TypeString Event Type

Data (optional) extra data Object passed to the event Object as the event. data Attribute Value

FnFunction is bound to the processing function above each event that matches the element.

Example
Description:
When all paragraphs are clicked for the first time, all their texts are displayed.

JQuery code:
$ ("P"). one ("click", function (){
Alert ($ (this). text ());
});

Question about jquery event writing?

You cannot save it! Even though the object is the same, the events you trigger cannot coexist!
Try $ ("textarea"). keyup (function (){
$ ("Textarea"). focus (function (){
}
}
Event hanging in the event!
Although there are few codes, it looks quite comfortable.