JQuery organizing notes 5 ---- jQuery events

I. Events

1. Load DOM

$ (Document). ready () is described in detail in section 1.

2. Event binding

JQuery defines the bind () method as a unified interface to bind an event handler for each matching element. Basic Syntax: bind (type, [data], fn );

The parameter type indicates the event type, and the parameter data is an optional parameter. It can be used as an additional data object passed to the event object as the event. data Attribute Value. The fn parameter indicates the event processing function.

For example, in the following example, a click event is bound to the p element. When you click different paragraph texts, the content of different paragraph texts is displayed:

   Toggle ()<Script src = "jquery-2.1.0.min.js" type = "text/javascript"> </script> <script type = "text/javascript">
 </Script>  

If you want to pass more information to the event handler, You can encapsulate this information in an object structure and use this object as the second parameter of the bind () method, in this way, data is communicated with the data outside the data.

For example, based on the above example, two values A and B are passed to it:

   New Document<Script src = "jquery-2.1.0.min.js" type = "text/javascript"> </script> <script type = "text/javascript">
 </Script> 
Section 1
Section 2
Section 3
 

We can abbreviated the binding event as $ ("p"). click (function (){})

Bind events with one ()

One () is a special case of bind (). Events bound to it expire after a response is executed. Let's look at an example:

   Toggle ()<Script src = "jquery-2.1.0.min.js" type = "text/javascript"> </script> <script type = "text/javascript">
 </Script>  

That is to say, the events bound to the one () method are canceled once after they are executed. However, in some scenarios in actual development, some events need to be logged out under certain circumstances, rather than being logged out once upon triggering.

In this regard, jQuery defines a special method for event cancellation.

Events

Blur ()	Focus ()	Mousedown ()	Resize ()
Change ()	Keydown ()	Mousemove ()	Scroll ()
Click ()	Keypress ()	Mouseout ()	Select ()
Dblclick ()	Keyup ()	Mouseover ()	Submit ()
Error ()	Load ()	Mouseup ()	Unload ()

3. deregister an event

Unbind (). This method corresponds to bind (). It can delete all bound events from a matching element or specified binding events. If no parameter is specified, delete all.

Parameters:

The first parameter is the event type.

The second parameter is the function to be removed.

If no parameter exists, all bound events are deleted. If the event type is provided as a parameter, only binding events of this type are deleted.

It should not be common.

4. Merging events

JQuery has two merging events-hover () and toggle (), both of which are self-defined by jQuery.

(1) hover () method

The syntax structure is hover (enter, leave)

The hover () method is used to simulate a cursor hover event. When the cursor moves to the element, the specified first function is triggered, and the second function is triggered when the cursor leaves.

This function is easy to understand and can be used in practical development.

The simplest example is as follows:

   Hover ()<Script src = "jquery-2.1.0.min.js" type = "text/javascript"> </script> <script type = "text/javascript">
 </Script> Three Kingdoms

(2) toggle () method

Syntax structure toggle (fn1, fn2, fn3.. fnN)

The toggle () method is used to simulate consecutive Mouse clicking events. When you click an event for the first time, the specified first function is triggered, and the second function is triggered for the second time .... if there are more functions, trigger them until the last one. Each subsequent click is a round call to these functions.

The first thought of this method is that toggleClass () is used to change the style of the element object.

The toggle method is also quite understandable. It has never been used in projects before. For example:

   Unbind ()<Script src = "jquery-1.8.3.js" type = "text/javascript"> </script> <script type = "text/javascript">
 </Script> WTI
 
 
 

Note: The jquery library referenced in the above example is not a commonly used jquery-2.1.0.min.js, because the toggle () switching function is removed in jquery1.9, And now toggle can only control the explicit hiding of elements.

6. Custom events

   Custom events<Script src = "jquery-2.1.0.min.js" type = "text/javascript"> </script> <script type = "text/javascript">
 </Script>  

6. Attributes of event objects

Attributes and methods of jQuery Event objects

Attribute/Method	Description
Type	Obtain the event type, such as click and mouseover. The returned value is the name of the event type.
Target	The node where the event occurs. Generally, this attribute is used to obtain the specific object of the active event.
RelatedTarget	Reference the node related to the target node of the event. For a mouseover event, it is the node that the mouse pointer leaves when it moves to a target. For a mouseout event, it is the target to which the mouse pointer enters when it leaves the target.
AltKey	Indicates whether the alt key is pressed when the mouse event is declared. If the returned value is true
CtrlKey	Indicates whether the ctrl key is pressed when the mouse event is declared. If the returned value is true
ShiftKey	Indicates whether the shift key is pressed when the mouse event is declared. If the returned value is true
MetaKey	Indicates whether the [meta] key is pressed when the mouse event is declared. If the returned value is true
Which	When mousedown and mouseup are declared, the status value of the mouse key is displayed, that is, the mouse key that has changed its status. The returned value is 1, indicating that the left button is pressed, and the returned value is 2, indicating that the middle button is pressed, if the returned value is 3, right-click
Which	When the keydown and keypress events are declared, the numeric encoding of the keyboard key that triggers the events is displayed.
PageX	For a mouse event, specify the horizontal coordinates of the mouse pointer relative to the page Origin
PageY	For a mouse event, specify the vertical coordinates of the mouse pointer relative to the page Origin
ScreenX	For a mouse event, specify the horizontal coordinates of the mouse pointer relative to the screen origin.
ScreenY	For a mouse event, specify the vertical coordinates of the mouse pointer relative to the screen origin.
Data	Stores the additional data transmitted by the second parameter of the event handler function.
PreventDefault ()	Canceling events that may cause any semantic operations, such as default operations for element-specific event types, such as canceling submit default form submission operations
StopPropagation ()	Prevent events from spreading up the DOM tree and prevent event bubbles.

7. Event bubbling

(1) What is event bubbling?

Assume that the webpage has two elements, one of which is nested in the other and bound to the click event. The colleague body element is also bound to the click event.

   Event bubbling<Script src = "jquery-2.1.0.min.js" type = "text/javascript"> </script> <script type = "text/javascript">
 </Script> Out-of-scope divThe div function is within the range of the div function.

The following figures show the initial page, click a button, the div action range for clicking a non-button, and the div action range for clicking a div:

The reason for this is that the event continues to go up to the top like a bubble.

(2) problems caused by event bubbling:

As in the example above, we click the button in the div and only want to trigger the Click Event of the button, but the actual result is beyond our expectation, so we must limit the scope of the event. <喎?http: www.bkjia.com kf ware vc " target="_blank" class="keylink"> VcD4KPHA + signature + CjxwPkGhos2ouf3Kwrz + signature + CjxwcmUgY2xhc3M9 "brush: java;"> // bind a click event $ ('input') to the input element '). click (function (event) {var txt00000000('{msg'0000.html () +"

The button in the div is clicked.

"Sequence ('sequence msg'sequence .html (txt); event. stopPropagation (); // stop event bubbling })After modification, click the button to change

B. You can also add return false after the event processing function is executed to prevent event bubbles.

// Bind the click Event $ ('input') to the input element. click (function () {var txt00000000('{msg'0000.html () +"
The button in the div is clicked.
"Commandid ('{msg'}.html (txt); return false ;})

8. Event assignment and dismission

Live () and die ()

Example:

   Event delegation and dismission<Script src = "jquery-1.8.3.js" type = "text/javascript"> </script> <script type = "text/javascript">
 </Script> 
Paragraph text
 

9. Event namespace

JQuery supports event namespaces to facilitate event management. For example, in the following example, bind multiple event types to the div element, and then use the namespace for standardization to facilitate management. The so-called event namespace is to append an alias after the event type with the dot syntax to facilitate reference to the event, for example, click. a, where a is the alias of the click current event.

Example:

   JQuery namespace<Script src = "jquery-2.1.0.min.js" type = "text/javascript"> </script> <script type = "text/javascript">
 </Script> JQuery namespace

We have specified a namespace for all the events bound to the div, so that when deleting the event, you can directly specify the namespace. For example, you can call the following line of code to delete all the events bound above:

$ ("Div"). unbind (". ");

Similarly, if we specify different namespaces for the click event type, we only need to specify the namespace when we only want to delete one.

10. bind multiple events

We can bind multiple events to the same element, either of the same type or different types.