jQuery---绑定事件

jQuery—绑定事件

文章目录

  • 一、最常用方法
  • 二、bind函数
  • 三、on函数
    • 两个形参
    • 三个形参
  • 四、delegate函数
  • 五、总结


一、最常用方法

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

举例1:

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

举例2:

//这里的#btn1为id选择器即id名为btn1的元素,mouseenter为鼠标聚焦事件
$("#btn1").mouseenter(function(){
					//函数内容
				})

举例3:

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

二、bind函数

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

举例1:

//button为元素选择器,bind的中文意思为‘绑定’
$("button").bind({"click":function(){
					//函数内容
				}})

举例2:

//这里的#btn1为id选择器即id名为btn1的元素,mouseenter为鼠标聚焦事件
$("#btn1").bind({"mouseenter":function(){
					//函数内容
				}})

举例3:

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

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

三、on函数

两个形参

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

举例:

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

:含有两个形参的on函数,和bind函数使用方法类似,只是格式不同,可以一起记忆。

三个形参

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

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

举例:

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

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

四、delegate函数

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

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

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

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

五、总结

  • 纵观上面的绑定事件,可以发现,不同的绑定事件只是换了一个关键字以及相对应的参数列表;
  • 它们共有的都是$("选择器").函数名(参数列表);参数列表内容无外乎为事件名称,和匿名函数,或者是子节点选择器,
  • 这里的匿名函数,实际上就是一个存放代码体的地址,相当于参数是一个地址,只是为了减少代码量,直接将函数地址用匿名函数的形式代替了。
模板
最常用 $(“选择器”).事件名称(匿名函数)
bind函数 $(“选择器”).bind({“事件名称”:匿名函数})
on函数 $(“选择器”).on(“事件名称”,匿名函数)
$(“父节点选择器”).on(“事件名称”,“孩子节点,即要绑定的元素”,匿名函数)
delegate函数 $(“父节点选择器”).delegate(“孩子节点,即要绑定的元素”,“事件名称”,匿名函数)

关于jQuery的绑定事件,在实际开发过程中,往往使用的是链式编程,详见我的另外一篇文章《jQuery—链式编程》

你可能感兴趣的:(JS,jquery,javascript,前端)