JQuery learning notes events

I. Event binding

1. Event binding function
The event binding function is in the following format:
. Bind (type [, data], fn)
Type: type such as click .....
Data: Parameter
Fn: function executed by the event

Example
Copy codeThe Code is as follows:
$ (Function (){
$ (# Id1). click (function (){
$ (# Id2). show (); // id2 display
});
});

Ii. Merging events
1. Move the mouse over the event
. Hover (enter, leave)
Enter: The function triggered when the cursor moves to the object.
Leave: The function triggered by moving the cursor out of an object.

Example:
Copy codeThe Code is as follows:
$ (Function (){
$ (# Id1). hover (function (){
$ (# Id2). show (); // id2 display
}, Function (){
$ (# Id2). hide (); // id2 hide
});
});


2. Continuous Click Event
. Toggle (fn1, fn2. ......, fnN)
Fn: Click the first fn1 execution, the second fn2 execution, and so on.

Events 3. Event bubbling
The event is always executed from the inner layer to the outermost layer. If you do not click the object, all the events bound to the object that contains the object will be executed once. This is what we do not want to see, jQuery defines some methods to prevent event execution.
1. Get the event object
To obtain an event object, add a parameter to the event execution function.
$ (# Id1). click (function (even) {}); // even is the obtained event object.
2. Prevent event bubbles
We can add this code to the event execution function to prevent event bubbles.
Even. stopPropagation ();
3. Stop default events
By default, events in the browser are submitted after clicking the button and clicking the link to open the link. jQuery can also prevent the execution of these default events.
Even. preventDefault ();

4. Get the properties of the event object
Even. type (); // gets the event type,
For example:
$ (# Id1). click (function (even ){
Alert (even. type );
Return false;
}); // Return "click"

Even.tar get (); // gets the object of the trigger event

Even. while (); get 1 = left, 2 = middle, 3 = right-click

5. Remove events
. Unbind (type [, data]);

Example:
Copy codeThe Code is as follows:
$ (Function (){
$ (# Id1). bind ("click", fn1 = function () {alert ("Event 1 ");})

. Bind ("click", fn2 = function () {alert ("Event 2 ");});
. Bind ("click", fn3 = function () {alert ("event 3 ");});
});

$ ("# Id2"). click (function (){
$ (# Id1). unbind ("click", fn2); // Delete the click event of fn2
});

Vi. Other operations
1. bind multiple events
. Bind (type [, data], fn). bind (type [, data], fn )......;
. Bind (type... [, data], fn );
2. Add an event namespace
. Bind (type. namespace [, data], fn );
You only need to specify a namespace for use, such as $ (# id1). unbind (". namespace ")