jQuery绑定事件

模板
最常用	$(“选择器”).事件名称(匿名函数)
bind函数	$(“选择器”).bind({“事件名称”:匿名函数})
on函数	$(“选择器”).on(“事件名称”,匿名函数)
	$(“父节点选择器”).on(“事件名称”,“孩子节点,即要绑定的元素”,匿名函数)
delegate函数	$(“父节点选择器”).delegate(“孩子节点,即要绑定的元素”,“事件名称”,匿名函数)

1. 最常用方法

   $(“选择器”).事件名称(匿名函数)

   //button为元素选择器，click为鼠标点击事件
   $("button").click(function(){
   	// 函数内容
   })
   

   $("#btn1").mouseenter(function(){
   	// 函数内容
   })
   

   //.ps为类选择器即class名为ps的所有元素，mouseleave为鼠标离焦事件
   $(".ps").mouseleave(function(){
   	// 函数内容
   })
   

2. bind函数

   $(“选择器”).bind({“事件名称”:匿名函数})

   //元素选择器，bind的中文意思为‘绑定’
   $("button").bind({"click":function(){
   	// 函数内容
   }})
   
   //id选择器，mouseenter为鼠标聚焦事件
   $("#btn1").bind({"mouseenter":function(){
   	// 函数内容
   }})
   
   //类选择器，mouseleave为鼠标离焦事件
   $(".ps").bind({"mouseleave":function(){
   	// 函数内容
   }})
   

   注：这里的bind函数参数为一个大括号包裹的字典，key值为双引号下的事件名称，value值为函数内容，一定要注意格式。

3. on函数
   两个形参

   $(“选择器”).on(“事件名称”,匿名函数)

   $("button").on("click",function(){
   	// 函数内容
   })
   

   注：含有两个形参的on函数，和bind函数使用方法类似，只是格式不同。

   三个形参
   含有三个参数，非常适合含有多个孩子的父节点使用，可以统一控制孩子节点事件

   $(“父节点选择器”).on(“事件名称”,“孩子节点,即要绑定的元素”,匿名函数)

   $("ul").on("click","li",function(){
   	$(this).css("color","blue");    //this表明当前点中的对象，此语句表明，当点击li标签时候，将该li标签颜色变为blue
   })
   

   注:一定要注意含有三个参数的使用场景，并且注意this关键字的使用

4. delegate函数
   delegate函数有三个形参，和on函数有着相似之处，区别是参数位置不同。

   $(“父节点选择器”).delegate(“孩子节点,即要绑定的元素”,“事件名称”,匿名函数)

   $("ul").delegate("li","click",function(){
   	$(this).css("color","blue");
   })
   

   注：一定要注意这里的参数排列顺序和on函数的参数排列顺序不同。