Basic events for JQuery

There are many events used in JavaScript learning, common events are: Click, DblClick, MouseDown, MouseUp, MouseMove, MouseOver, mouseout, change, select, Submit, KeyDown, KeyPress, KeyUp, Blur, focus, load, resize, scroll, error.

1. Binding of events

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

2. Composite Events

Method 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, click on the 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 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
}
});

Basic events for JQuery