jQuery绑定事件

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

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

//button为元素选择器,click为鼠标点击事件
$("button").click(function(){
  // 函数内容
})
$("#btn1").mouseenter(function(){
  // 函数内容
})
//.ps为类选择器即class名为ps的所有元素,mouseleave为鼠标离焦事件
$(".ps").mouseleave(function(){
  // 函数内容
})
  1. bind函数

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

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

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

  1. on函数
    两个形参

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

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

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

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

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

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

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

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

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

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

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


相关文章
|
6月前
|
JavaScript API
Jquery绑定事件的方法
Jquery绑定事件的方法
|
JavaScript Java API
Java Web——jQuery中的第二组函数(remove、empty、append、html、each)与on()绑定事件
Java Web——jQuery中的第二组函数(remove、empty、append、html、each)与on()绑定事件
Java Web——jQuery中的第二组函数(remove、empty、append、html、each)与on()绑定事件
|
JavaScript 开发者
jQuery_ 绑定事件处理器下|学习笔记
快速学习 jQuery_ 绑定事件处理器下
192 0
jQuery_ 绑定事件处理器下|学习笔记
|
JavaScript 前端开发
JavaScript 技术篇-js代码触发dom元素绑定事件实例演示,jquery触发元素绑定事件方法
JavaScript 技术篇-js代码触发dom元素绑定事件实例演示,jquery触发元素绑定事件方法
445 0
JavaScript 技术篇-js代码触发dom元素绑定事件实例演示,jquery触发元素绑定事件方法
|
JavaScript
jquery的bind跟on绑定事件的区别
jquery的bind跟on绑定事件的区别:主要是事件冒泡; jquery文档中bind和on函数绑定事件的用法: .bind(events [,eventData], handler) .on(events [,selector]  [,data], handler)   从文档中可以看出,.
751 0
|
JavaScript 前端开发
Jquery绑定事件(bind和live的区别)
Jquery中绑定事件有三种方法:以click事件为例    (1)target.click(function(){});    (2)target.bind("click",function(){});    (3)target.live("click",function(){}); 第一种方法很好理解,其实就和普通JS的用法差不多,只是少了一个on而已
1213 0
|
JavaScript
jquery之on()绑定事件和off()解除绑定事件
off()函数用于移除元素上绑定的一个或多个事件的事件处理函数。 off()函数主要用于解除由on()函数绑定的事件处理函数。 该函数属于jQuery对象(实例)。 语法 jQuery 1.7 新增该函数。
1177 0