jquery 事件绑定及取消 bind live delegate on one区别 (超详细且通俗易懂)
on bind delegate live one 四种方法差别不是特别大 bind讲完后,后面的方法只会说不同点
1.bind()
$(selector).bind(event,data,function,map)
event |
必需。规定添加到元素的一个或多个事件。
由空格分隔多个事件值。必须是有效的事件。 |
data | 可选。规定传递到函数的额外数据。 |
function | 必需。规定当事件发生时运行的函数。 |
map | 规定事件映射 ({event:function, event:function, ...}),包含要添加到元素的一个或多个事件,以及当事件发生时运行的函数。 |
最简单的写法 绑定单个事件执行事件函数,
$("p").bind("click",function(){alert("这个段落被点击了。");
});
这样写跟普通的写法没区别 就没必要使用绑定事件方法了
obj.click(function(){})
注:js同一个dom元素多次绑定同一事件,只会执行最后一次的事件,所以如果有这种需求,需要使用addEventListener方法添加事件,jquery则不会 它会全部执行,两者都是同时执行,并不是按顺序一一执行。
bind()方法可以进行多个事件绑定,添加回调函数,
$(document).ready(function(){$("p").bind("mouseover mouseout",function(){$("p").toggleClass("intro");});
});
两个事件分别执行一次函数内容,如果要事件单独执行各自的函数 可以使用map映射(分开写)的方法,就可以各自执行了,
$(document).ready(function(){$("button").bind({click:function(){$("p").slideToggle();},mouseover:function(){$("body").css("background-color","#E9E9E4");}, });
});
或者添加多个事件后 ,函数使用event.type来判断是哪一个事件来进行各自的函数内容。
$(document).ready(function(){$("p").bind("click dblclick mouseover mouseout",function(e){
if(e.type == 'click'){
alert('这是click事件')
}else if(e.type == 'dblclick'){
alert('这是dbclick事件')
}});
});
data是可选的额外添加的数据,函数中可以用event.data接受使用。
$(document).ready(function(){$("p").bind("click", {msg: "你刚点击了!"}, function handlerName(e){alert(e.data.msg); })
});
取消绑定用 unbind()方法
$("button").click(function(){
$("p").unbind(); //取消p标签所有绑定的事件
});
unction alertMe()
{alert("Hello World!");
}
$(document).ready(function(){$("p").click(alertMe);$("p").click(function(){alert(123)});$("button").click(function(){$("p").unbind("click",alertMe); //将p标签单击调用alertMe的事件取消});
});
$(document).ready(function(){var x=0;$("p").click(function(e){$("p").animate({fontSize:"+=5px"});x++;if (x>=2){$(this).unbind(e); //还可以通过取消参数 来接触事件}});
});
2.live()
event |
必需。规定添加到元素的一个或多个事件。
由空格分隔多个事件值。必须是有效的事件。 |
data | 可选。规定传递到该函数的额外数据。 |
function | 必需。规定当事件发生时运行的函数。 |
和bind方法有两个不同
1.没有map不能单独规定事件
2.live方法绑定的事件会应用于当前现有的元素以及未来元素,也就是事件委托机制,把节点的处理统一委托给了根节点document,所以后面动态添加的新节点同样会有相同的事件。
$("button").live("click",function(){
$("p").slideToggle(); //给所有的p节点添加了收缩事件,包括动态添加的新的p标签
});
注:使用live()方法只能放在直接选择的元素后面,不能在层级比较深,连缀的DOM遍历方法后面使用,即$(“ul”").live...可以,但$("body").find("ul").live...不行;
取消绑定用die()方法 跟unbind()一样。
3.delegate ()
$(selector).delegate(childSelector,event,data,function)
childSelector | 必需。规定要添加事件处理程序的一个或多个子元素。 |
event |
必需。规定添加到元素的一个或多个事件。
由空格分隔多个事件值。必须是有效的事件。 |
data | 可选。规定传递到函数的额外数据。 |
function | 必需。规定当事件发生时运行的函数。 |
这个方法就相当于加强版的live()方法,由于live方法事件委托会直接委托在根节点上,费时费力,
于是就有了delegate()方法,它可以选择委托范围,就是给selector父节点内的所有childSelector子节点绑定事件。
$(document).ready(function(){$("div").delegate("p","click",function(){ //给div里的p标签绑定事件$(this).slideToggle();});$("button").click(function(){$("<p>这是一个新段落。</p>").insertAfter("button");//动态添加的新标签会保留事件});
});
undelegate()取消绑定事件
4.on()
究极进化的产物,集前面三位所长为一身,也是最推荐用的,在版本更新迭代中,前面三位有的无了。
$(selector).on(event,childSelector,data,function) 和delegate书写顺序不同 这个on要先写事件
event |
必需。规定要从被选元素添加的一个或多个事件或命名空间。
由空格分隔多个事件值,也可以是数组。必须是有效的事件。 |
childSelector | 可选。规定只能添加到指定的子元素上的事件处理程序(且不是选择器本身,比如已废弃的 delegate() 方法)。 |
data | 可选。规定传递到函数的额外数据。 |
function |
可选。规定当事件发生时运行的函数。 |
它既可以给单个标签绑定事件,有map映射,也可以自主选择事件委托对象给后面动态创建的节点绑定事件。
取消绑定事件的方法是off()
这里就不做演示了 跟上面的大同小异,大家赶快去试试吧!
5.one()
$(selector).one(event,data,function)
event |
必需。规定添加到元素的一个或多个事件。
由空格分隔多个事件值。必须是有效的事件。 |
data | 可选。规定传递到函数的额外数据。 |
function |
必需。规定当事件发生时运行的函数。 |
one()方法相当于bind区别是one只执行一次,就会自动解除事件.
$(document).ready(function(){$("p").one("click",function(){$(this).animate({fontSize:"+=6px"});});
});
jquery 事件绑定及取消 bind live delegate on one区别 (超详细且通俗易懂)相关推荐
- jQuery事件绑定on()、bind()与delegate() 方法详解
啃了一段日子的js相关了,学的过程中发现在jQuery中绑定事件时,有人用bind(),有人用on(),有人用delegate(),还有人用live(),看代码的时候觉得都实现功能了也就掀过去了,只是 ...
- jquery事件绑定和解除绑定bind、unbind、one
全栈工程师开发手册 (作者:栾鹏) jquery系列教程4-事件操作全解 jquery事件绑定 使用函数bind(type [,data],fn)绑定事件,one函数也可以进行一次绑定,但是需要注意b ...
- jQuery 事件绑定方法(bind hover toggle live.... )、删除事件方法(unbind, die)及 事件对象
事件绑定方法: 1.<type>(function) $("button").click(function(){... }); 2.bind(map) $(" ...
- JQuery事件绑定,bind与on区别
jquery事件绑定 bind:向匹配元素添加一个或多个事件处理器 $(selector).bind("click",data,function); live:向当前或未来的匹配元 ...
- [jQuery] 谈一下Jquery中的bind(),live(),delegate(),on()的区别?
[jQuery] 谈一下Jquery中的bind(),live(),delegate(),on()的区别? 在我们深入了解这些方法之前,我们先来一段常见的的HTML,作为我们编写jquery示例方法使 ...
- jQuery事件绑定与解绑
一.jQuery事件 方法 描述 执行时机 click() 触发或将函数绑定到指定元素的click事件 单击鼠标时 dblclick() 触发或将函数绑定到指定元素的dblclick事件 双击鼠标时 ...
- HTML中详述jQuery事件绑定方式
jQuery事件绑定方式 1.bind()方法: bind(type,[data],fn):为每个匹配元素的特定事件绑定对应的事件处理函数,各参数含义如下: type表示事件类型,多个事件类型使用空格 ...
- JQuery-学习笔记06【高级——JQuery事件绑定和切换】
Java后端 学习路线 笔记汇总表[黑马程序员] JQuery-学习笔记01[基础--JQuery基础]--[day01] JQuery-学习笔记02[基础--JQuery选择器] JQuery-学习 ...
- day05【JQuery框架】HTML引入Jquery、jQuery与JS区别、基本选择器、层级关系选择器、属性选择器、过滤选择器、 对象遍历、Jquery的DOM操作【重点】、Jquery事件绑定
回顾 1. bom对象window对象三种弹框alert()confirm()prompt()二种定时器一次性:setTimout() --- 通过递归实现循环性循环性:setInterval()lo ...
最新文章
- 2021年春季学期-信号与系统-第三次作业参考答案-第六道题
- JVM 内部原理(七)— Java 字节码基础之二
- iOS runtime和runloop
- 世界上没有技术驱动型公司
- 数据3分钟丨GitHub开放全世界最大安全咨询数据库;DataBench-T正式开源;甲骨文283亿美元收购Cerner...
- 超过4G的分区安装oracle,Red hat Linux AS4.0安装Oracle9.2.04详细步骤
- IE7下JSON不能有多余的逗号,IE8下创建IMG节点的BUG
- [Luogu1462]通往奥格瑞玛的道路
- 在struct 中使用string,赋值会报错
- 想跟大家一起做件小事
- 打造自己的 PTM!新词挖掘+预训练
- 前端两种播放视频的方式
- 目前最新传智播客郭永锋最新工作室2018Java培训项目实战(完整)
- linux命令关闭浏览器,linux命令行浏览器的使用方法
- 写渗透测试/cnvd/src/cve报告文档
- 六祎-Mybatis高速下载通道
- ARM MIPS PowerPC X86 四大常见处理架构比较
- 腾讯地图实现微信小程序地图定位教程
- 选择SAP IBP(集成业务计划云)的十大理由
- word转图片,pdf转图片,doc转图片,docx转图片