绑定事件处理器
1、.bind（）
绑定一个事件
为元素绑定一个事件处理程序，也就是说给元素添加一个事件，
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title></title> <script src="jQuery.js"></script> </head> <body> <button id="btn">按钮</button> </body> <script> $(function(){ // bind(事件类型,处理函数,布尔类型） 第三个参数可省略 // False是阻止冒泡事件， // true为默认事件，也就是冒泡事件，也就是浏览器会有一个自动 // 的事件处理，比如有一个a链接，点击就会跳转） $("#btn").bind("click",function(){ alert("啊啊啊"); }); }) // bind 这个方法已经不使用了，追加的是on（）方法。 //是将事件处理程序绑定到document的首选方法 </script> </html>
绑定两个事件
还可以同时绑定两个事件，是互相不会覆盖的，
$("#btn").bind("click mouseover",function(){
alert("啊啊啊");
});
})
绑定不同事件，显示不同内容
$(function(){
$("#btn").bind({
click:function(){
alert("click");
} ,
mouseover:function(){
alert("mouseover");
}
})
})
例：
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title></title> <script src="jQuery.js"></script> <style> p{ width: 100px; height: 50px; background-color: darkcyan; border-radius: 5px; text-align: center; line-height: 50px; /* 垂直居中 */ margin: 0 auto; /* 居于浏览器中间 上下为0，左右自动*/ color: #ffffff; font-size: 20px; /* 字体大小 */ } .pbtn{ background-color: red; } </style> </head> <body> <p>按钮</p> </body> <script> $(function(){ $("p").bind({ mouseover:function(){ $(this).addClass("pbtn"); }, mouseout:function(){ $(this).removeClass("pbtn"); } }) }) </script> </html>
toggleClass（）简化
利用toggleClass（）简化，同等效果
$("p").bind("mouseover mouseout",function(){
// toggleClass("pbtn")如果有这个类名就去掉，没有就增加
$(this).toggleClass("pbtn")
})
2、.delegate（）
事件委托
参数有三个（选择器，事件类型，处理函数）
常用为ul和li标签组合
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title></title> <script src="jQuery.js"></script> </head> <body> <ul> <li>li 1</li> <li>li 2</li> <li>li 3</li> <li>li 4</li> </ul> </body> <script> $(function(){ $("ul").delegate("li","click",function(){ alert($(this).html()); }) }) </script> </html>
3、.off（）移除
var fn=function(){
alert("hahah");
}
$("div").on("click mouseover","p",fn);
$("div").off();
会发现，on事件绑定的效果被移除掉了。
4、.on（）添加
bind（）和delegate（）都可以用on（）事件来代替
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title></title> <script src="jQuery.js"></script> </head> <body> <button id ="btn">button</button> <ul> <li>li 1</li> <li>li 2</li> <li>li 3</li> <li>li 4</li> </ul> </body> <script> $(function(){ // $("ul").delegate("li","click",function(){ // alert($(this).html()); // }) $("#btn").on("click",function(){ alert("haha"); }); $("ul").on("click","li",function(){ alert($(this).html()); }) }) </script> </html>
绑定多个事件
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title></title> <script src="jQuery.js"></script> <style> p{ width: 100px; height: 60px; background-color: red; } </style> </head> <body> <button id ="btn">button</button> <ul> <li>li 1</li> <li>li 2</li> <li>li 3</li> <li>li 4</li> </ul> <p>hahah</p> </body> <script> $(function(){ // $("ul").delegate("li","click",function(){ // alert($(this).html()); // }) $("#btn").on("click",function(){ alert("haha"); }); $("ul").on("click","li",function(){ alert($(this).html()); }); $("p").on("mouseover mouseout ",function(){ alert("hahah"); }) }) </script> </html>
方法二
var fn=function(){
alert("hahah");
}
$("div").on("click mouseover","p",fn);
5、.one（）
为元素的事件添加处理函数，处理函数在那个元素上，那种事件类型，最多处理一次，常用作引导页，因为引导页只执行一次
<script> $(function(){ $("p").one("click",function(){ alert("hahah"); }) }) </script>
会发现，点击一次会有alert效果，再次点击则不会触发。
6、.unbind（）
为bind（）的移除事件，和off（）用法一样。
7、.undelegate（）
为delegate（）的移除事件，和off（）用法一样。
