jquery 事件绑定及取消 bind live delegate on one 区别（超详细且通俗易懂）

作者：Ankiee

2022-11-24
河北
本文字数：1819 字
阅读完需：约 6 分钟

on bind delegate live one 四种方法差别不是特别大 bind 讲完后，后面的方法只会说不同点

1.bind（）

$(selector).bind(event,data,function,map)

最简单的写法绑定单个事件执行事件函数，

$("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()

和 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)

这个方法就相当于加强版的 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 要先写事件

它既可以给单个标签绑定事件，有 map 映射，也可以自主选择事件委托对象给后面动态创建的节点绑定事件。

取消绑定事件的方法是 off（）

这里就不做演示了跟上面的大同小异，大家赶快去试试吧！

5.one()

$(selector).one(event,data,function)

one()方法相当于 bind 区别是 one 只执行一次,就会自动解除事件.

$(document).ready(function(){  $("p").one("click",function(){    $(this).animate({fontSize:"+=6px"});  });});

复制代码

点击并拖拽以移动

发布于: 刚刚阅读数: 3

原文链接:【http://xie.infoq.cn/article/2309f214c20c883e04eb02401】。文章转载请联系作者。

Ankiee

关注

还未添加个人签名 2022-11-22 加入

还未添加个人简介

发布

暂无评论

创作场景

jquery 事件绑定及取消 bind live delegate on one 区别 （超详细且通俗易懂）

on bind delegate live one 四种方法差别不是特别大 bind 讲完后，后面的方法只会说不同点

1.bind（）

取消绑定用 unbind()方法

2.live()

3.delegate ()

undelegate()取消绑定事件

4.on()

5.one()

Ankiee

评论

jquery 事件绑定及取消 bind live delegate on one 区别（超详细且通俗易懂）