JQuery Foundation Events

JavaScript has a very important function, which is event-driven. When the page is fully loaded, the user triggers the element of the bound event in the page by the mouse or keyboard. JQuery is a more efficient way for developers to write event behavior, encapsulating a number of useful event methods for our use.

A Binding events

In the course of JavaScript learning, we have mastered a lot of events used, 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 that can be referenced in the events section of the manual.

JQuery uses the. bind () method to bind these events to an element. Can pass three parameters: Bind (TYPE,[DATA],FN), type represents one or more types of event name string, [data] is optional, as the value of the Event.data property is passed an additional data, the data is a string, a number, An array or an object; FN represents a handler that is bound to the specified element.

Use Click events

$ (' input '). Bind (' click ', function () {///click button to execute anonymous function

Alert (' Click! ‘);

});

General processing functions

$ (' input '). Bind (' click ', FN); Perform normal function without parentheses

function fn () {

Alert (' Click! ‘);

}

Multiple events can be bound at the same time

$ (' input '). Bind (' mouseout mouseover ', function () {//move in and move out to execute once

$ (' div '). html (function (Index,value) {

returnvalue+ ' 1 ';

});

});

To bind multiple parameters by object key-value pairs

$ (' input '). Bind ({//Pass an Object

' Mouseout ': function () {//The quotation marks of the event name can be omitted

Alert (' emigration ');

},

' MouseOver ': function () {

Alert (' Move in ');

}

});

To delete a bound event using unbind

$ (' input '). Unbind (); Delete events for all current elements

To delete a specified type event using the Unbind parameter

$ (' input '). Unbind (' click '); Delete the Click event for the current element

Use the unbind parameter to delete an event that specifies a handler function

function fn1 () {

Alert (' click 1 ');

}

function fn2 () {

Alert (' click 2 ');

}

$ (' input '). Bind (' click ', fn1);

$ (' input '). Bind (' click ', fn2);

$ (' input '). Unbind (' click ', fn1); Only events that remove the FN1 handler function

Two Shorthand Event

To make it easier for developers to bind events, jQuery encapsulates common events to save more code. We call it a shorthand event.

Note: Most of the methods of encapsulation here are better understood, we do not need to one by one demonstration confirmation, focus on a few need attention to distinguish the shorthand method.

. MouseOver () and. Mouseout () indicate when the mouse is moved in and out of the trigger. Then JQuery also encapsulates another set:. MouseEnter () and. MouseLeave () indicate that the mouse is triggered when it passes through and through. So what is the difference between the two groups in nature? The instructions in the manual are:. MouseEnter () and. MouseLeave () This group is not triggered through child elements, while. MouseOver () and. Mouseout () are triggered.

HTML Page Setup

<div style= "Width:200px;height:200px;background:green;" >

<p style= "width:100px;height:100px;background:red;" ></p>

</div>

<strong></strong>

MouseOver move in

$ (' div '). MouseOver (function () {///move in Div will trigger, move in P and trigger

$ (' strong '). HTML (function (Index,value) {

returnvalue+ ' 1 ';

});

});

MouseEnter through

$ (' div '). MouseEnter (function () {//through DIV or P

$ (' strong '). HTML (function (Index,value) {///In this area only fires once

return value+ ' 1 ';

});

});

Mouseout move out

$ (' div '). Mouseout (function () {//Remove P will trigger, move out div and then trigger

$ (' strong '). HTML (function (Index,value) {

return value+ ' 1 ';

});

});

MouseLeave Wear out

$ (' div '). MouseLeave (function () {//moves out of the entire DIV area to trigger once

$ (' strong '). HTML (function (Index,value) {

return value+ ' 1 ';

});

});

. KeyDown (),. KeyUp () Returns the key code, and. KeyPress () returns the character encoding.

$ (' input '). KeyDown (function (e) {

alert (E.keycode); Press A to return 65

});

$ (' input '). KeyPress (function (e) {

alert (E.charcode); Press A to return 97

});

Note: E.keycode and E.charcode can also have different effects in two event swaps, except for characters that differ from non-character keys. Learn more about the JavaScript event handling chapter.

The. focus () and. blur () respectively indicate that the cursor is active and missing, and that the event firing time is the current element. The. Focusin () and. Focusout () also indicate that the cursor is active and missing, but the event firing time can be a child element.

HTML section

<div style= "width:200px;height:200px;background:red;" >

<input type= "text" value= ""/>

</div>

<strong></strong>

Focus Cursor Activation

$ (' input '). focus (function () {//Current element trigger

$ (' strong '). HTML (' 123 ');

});

Focusin cursor Activation

$ (' div '). Focusin (function () {///bind is div element, subclass input Trigger

$ (' strong '). HTML (' 123 ');

});

Note:. blur () and. Focusout () indicate that the cursor is missing, and activation is similar, that one must be triggered by the current element, and one can be a child element.

three. Composite Events

JQuery provides many of the most commonly used event effects, combining some functions to achieve some composite events, such as switching functions, smart loading, etc.

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 the. mouseover () and. Mouseout () methods.

. Toggle () This method is very special, this method has two layers meaning, the first layer meaning is already 1.8 version of waste, 1.9 version of the use of deleted, that is, click to switch Composite event usage. The second layer of the function will be explained in the animation.

Since it has been discarded, it should not be used. The reason for the deletion is: to reduce clutter and increase the potential modularity level. But you want to use this method very much, and do not want to write a similar function yourself, you can download the Jquery-migrate.js file to backwards-compatible with the method has been removed.

Background Click Switch effect (version 1.9 deleted)

<scripttype= "Text/javascript" src= "Jquery-migrate-1.2.1.js" ></script>

$ (' div '). Toggle (function () {//First click Toggle

$ (this). CSS (' background ', ' black ');

},function () {//second click Toggle

$ (this). CSS (' background ', ' blue ');

},function () {//Third click Toggle

$ (this). CSS (' background ', ' red ');

});

Note: Since the official has removed this method, it is also not recommended to use if the plugin is not based on backwards-compatible JS. We can implement this function ourselves.

var flag=1; Counter

$ (' div '). Click (function () {

if (flag==1) {//First click

$ (this). CSS (' background ', ' black ');

flag=2;

}elseif (flag==2) {//second click

$ (this). CSS (' background ', ' blue ');

Flag=3

}elseif (flag==3) {//Third click

$ (this). CSS (' background ', ' red ');

Flag=1

}

});

JQuery Foundation Events