jQuery 事件绑定及取消 bind live delegate on one区别解析

 更新时间:2022年11月17日 09:34:38   作者:坚毅的小解同志  
这篇文章主要介绍了jquery 事件绑定及取消 bind live delegate on one区别解析,本文给大家讲解的非常详细,对大家的学习或工作具有一定的参考借鉴价值,需要的朋友可以参考下

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

1.bind()

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

event    必需。规定添加到元素的一个或多个事件。

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 事件绑定及取消内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家!

相关文章

  • 通过JavaScript实现图片压缩

    通过JavaScript实现图片压缩

    在学习的时候,有时候看到一些一些网站的图片是经过压缩处理的,因为压缩之后的图片会节省一部分你的内存空间,这样的话也可以提升性能,于是就比较好奇这是如何实现的,今天我们就简单的实现一下,需要的朋友可以参考下
    2023-06-06
  • JS实现iframe编辑器光标位置插入内容的方法(兼容IE和Firefox)

    JS实现iframe编辑器光标位置插入内容的方法(兼容IE和Firefox)

    这篇文章主要介绍了JS实现iframe编辑器光标位置插入内容的方法,可实现文本与图片的插入功能,并兼容IE和Firefox浏览器,需要的朋友可以参考下
    2016-06-06
  • JavaScript实现焦点进入文本框内关闭输入法的核心代码

    JavaScript实现焦点进入文本框内关闭输入法的核心代码

    这篇文章给大家分享js实现焦点进入文本框内关闭输入法,代码简单易懂,非常不错,具有参考借鉴价值,需要的朋友参考下吧
    2017-09-09
  • TypeScript中Getter/Setter用法详解

    TypeScript中Getter/Setter用法详解

    getter使我们能够将属性绑定到在访问属性时调用的函数,而setter将属性绑定到在尝试设置属性时调用的函数,下面就跟随小编来看看TypeScript中Getter/Setter的用法吧
    2024-10-10
  • 微信小程序实现环形进度条

    微信小程序实现环形进度条

    这篇文章主要为大家详细介绍了微信小程序实现环形进度条,文中示例代码介绍的非常详细,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
    2022-06-06
  • 微信小程序实现tab页面切换效果

    微信小程序实现tab页面切换效果

    这篇文章主要为大家详细介绍了微信小程序实现tab页面切换效果,文中示例代码介绍的非常详细,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
    2022-08-08
  • js实现表单检测及表单提示的方法

    js实现表单检测及表单提示的方法

    这篇文章主要介绍了js实现表单检测及表单提示的方法,涉及javascript表单元素提示效果的相关技巧,非常简单实用,需要的朋友可以参考下
    2015-08-08
  • 原生JavaScript实现购物车

    原生JavaScript实现购物车

    这篇文章主要为大家详细介绍了原生JavaScript实现购物车,文中示例代码介绍的非常详细,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
    2021-01-01
  • 微信公众平台开发教程(四) 实例入门:机器人回复(附源码)

    微信公众平台开发教程(四) 实例入门:机器人回复(附源码)

    本篇文章主要介绍了微信公众平台开发机器人,可以实现简单对话和查询天气等,有需要的可以了解一下。
    2016-12-12
  • 微信小程序实现提交input信息到后台的方法示例

    微信小程序实现提交input信息到后台的方法示例

    这篇文章主要介绍了微信小程序实现提交input信息到后台的方法,结合实例形式分析了微信小程序提交input信息到后台相关事件响应与数据处理操作技巧,需要的朋友可以参考下
    2019-01-01

最新评论