jquery Foundation Events

A Binding events
In the course of JavaScript learning, we have mastered a lot of used events, commonly used events are: Click, DblClick,
MouseDown, MouseUp, MouseMove, MouseOver, mouseout, change, select, Submit, KeyDown,
KeyPress, KeyUp, Blur, focus, load, resize, scroll, error. Then there are more events to refer to
The events section of the manual.
JQuery uses the. bind () method to bind these events to an element. Three parameters can be passed: Bind (type, [data], FN),
Type represents one or more types of event name strings; [data] is optional and is passed as a Event.data property value.
Additional data, which is a string, a number, an array, or an object; FN means that the data is bound to
The processing function of the fixed element.
Two Shorthand Event
To make it easier for developers to bind events, jQuery encapsulates common events to save more code. I
They call it shorthand events.

Function	Describe	HTML Code	jquery Code	Results
Bind (type, [data], FN)	Binding an event to an element	<input type= "button" name= "name" value= "OK"/>	$ (' input '). Bind (' click ', function () { Alert (' event is executed! '); });	Click event to execute button
	Invoke function Execution Click event		$ (' input '). Bind (' click ', FN); function fn () { Alert (' Click! '); }
	To bind the mouse to move away and click Multiple events		$ (' input '). Bind (' Click MouseOver ', function () { Alert (' click event '); });	Mouse off and click Multiple events
	bind mouse move in and move multiple events	<input type= "button"  name= "name"  value= "OK" &NBSP;/> <div></div>	$" (' input '). Bind (' Mouseout mouseover ', function  ()  {     $ (' div '). html (function  (index,value)  {          return value +  ' 1 ';     }); });	mouse move in and move away div tag add 1
	To bind multiple parameters by object key-value pairs		$ (' input '). Bind ({ Mouseout:function () { Alert (' mouse out '); }, Mouseover:function () { Alert (' Mouse-in '); } });	Mouse move in and move off to perform a click event
Unbind (TYPES,FN)	Delete all Events		$ (' input '). Unbind ();
	Delete Only Click events		$ (' input '). Unbind (' click ');
	The Delete Click event is bound to the FN2		$ (' input '). Unbind (' click ', fn2);
Click (FN)	Trigger the Click (click) event for each matching element	<input type= "button" name= "name" value= "OK"/>	$ (' input '). Click (function () { Alert (' click event '); });
DblClick (FN)	DblClick (double-click) event that triggers each matching element		$ (' input '). DblClick (function () { Alert (' Double click event '); });
MouseDown (FN)	MouseDown (post-click) event that triggers each matching element		$ (' input '). MouseDown (function () { Alert (' Mouse down event '); });
MouseUp (FN)	MouseUp (click to Bounce) event that triggers each matching element		$ (' input '). MouseUp (function () { Alert (' Mouse release event '); });
MouseOver (FN)	MouseOver (mouse-over) event that triggers each matching element		$ (' input '). MouseOver (function () { Alert (' Mouse-over event '); });
Mouseout (FN)	Mouseout (mouse out) event that triggers each matching element		$ (' input '). Mouseout (function () { Alert (' Mouse out event '); });

. MouseOver () and. Mouseout () indicate when the mouse is moved in and out of the trigger. Then JQuery also encapsulates the additional
A group:. MouseEnter () and. MouseLeave () indicate that the mouse is triggered when it passes through and through. So the two groups are essentially
What difference does it have? The instructions in the manual are:. MouseEnter () and. MouseLeave () This group does not trigger through child elements,
and. MouseOver () and. Mouseout () are triggered.

Three Composite events
JQuery offers many of the most commonly used event effects, combining features to implement several composite events, such as switching
Smart loading, and so on.
Composite events
Method Name Description
Ready (FN) trigger event when DOM is loaded
Hover ([fn1,]fn2) when the mouse moves to trigger the first fn1, move out of the trigger FN2
Toggle (fn1,fn2[,fn3.]) is deprecated, when the mouse clicks trigger FN1, then click Trigger fn2 ...
Background move in move out toggle effect
$ (' div '). Hover (function () {
$ (this). CSS (' background ', ' black '); MouseEnter effect
}, function () {
$ (this). CSS (' background ', ' red '); MouseLeave effect, can be omitted
});
Note: the. Hover () method is a combination of the. MouseEnter () method and the. Mouseleva () method, not. MouseOver ()
and the. Mouseout () method.

jquery Foundation Events