jQuery study notes jQuery events_jquery-JS Tutorial-php.cn

jQuery study notes jQuery events_jquery

WBOY

Release： 2016-05-16 18:13:50

Original

1087 people have browsed it

1. Event binding

1. Event binding function
The binding function of the event is in the following form:
.bind(type [,data], fn)
type: type such as click.....
data: parameter
fn: function executed by the event

Example

Copy code The code is as follows:

 
$(function(){ 
$(#id1).click(function(){ 
$ (#id2).show(); //id2 shows 
}) ; 
}); 

2. Synthetic events
1. Mouse Hover event
.hover(enter,leave)
enter: function triggered when the mouse cursor moves to the object
leave: function triggered when the mouse cursor moves out of the object

Example:

Copy code The code is as follows:

 
$(function(){ 
$(#id1). hover(function(){ 
$(#id2).show();//id2 shows
}, function(){ 
$(#id2).hide();//id2 hides
}) ; 
}); 

2. Continuous click event
.toggle(fn1,fn2....,fnN)
fn: Click to execute fn1 for the first time, fn2 for the second time, and so on

 3. Event bubbling
Events are always executed from the inner layer and continue Go to the outermost layer, and if you don’t click on that object, all events bound to the objects containing this object will be executed once. This is what we don’t want to see. jQuery has defined some methods for us to prevent event execution
1. Obtain event object
The method to obtain the event object is to add a parameter to the event execution function
$(#id1).click(function(even){});//even is the obtained event Object
2. Prevent event bubbling
We can add such code in the event execution function to prevent event bubbling
even.stopPropagation();
3. Prevent default event
browsing The default event of the browser refers to submitting after clicking the button, opening the link after clicking the link, etc. jQuery can also prevent the execution of these default events
even.preventDefault();

4. Get Attributes of the event object
even.type();//Get the type of event,
such as:
$(#id1).click(function(even){
alert(even .type);
return false;
});//Return "click"

even.target();//Get the object that triggered the event

even.while (); Get the mouse click of 1=left, 2=middle, 3=right

5. Remove event
.unbind(type [,data]);

Example:

Copy code The 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
}); 

6. Other operations
1. Bind multiple events
.bind(type [,data],fn).bind(type [,data],fn) ...... ;
.bind(type type..... [,data],fn) ;
2. Add event namespace
.bind(type.namespace [,data] ,fn) ;
You only need to specify the namespace when using it, such as: $(#id1).unbind(".namespace")