jquery事件之事件委托和事件切换
一、事件委托函数：
|
方法名 |
说明 |
语法 （events 事件类型，data数据，handler 事件处理函数，selector 选择器） |
|
live |
用于为指定元素的一个或多个事件绑定事件处理函数。 |
jQueryObject.live( events [, data ], handler ) jQueryObject.one( eventObject ) |
|
die |
主要用于解除由live()函数绑定的事件处理函数。 |
jQueryObject.die( [ events [, handler ]] ) jQueryObject.die( eventObject ) |
|
delegate |
用于为指定元素的一个或多个事件绑定事件处理函数。 |
jQueryObject.delegate( selector , events [, data ], handler ) jQueryObject.delegate( selector,eventObject ) |
|
undelegate |
主要用于解除由delegate()函数绑定的事件处理函数。 |
jQueryObject.undelegate( [ selector , events [, handler ]] ) jQueryObject.undelegate( selector ,eventObject ) |
1.live()函数用于为指定元素的一个或多个事件绑定事件处理函数。从jQuery 1.7开始，该函数被标记为已过时；从jQuery 1.9开始被移除。请使用on()函数来替代。live()函数并不是直接在当前jQuery对象匹配的每个元素上绑定事件处理函数，而是将事件处理函数"委托"给document对象来处理。使用live()函数需要注意以下问题：当前jQuery对象必须通过选择器字符串构造，否则无法处理触发的事件；在调用该函数之前，jQuery会尝试查找当前jQuery选择器所匹配的元素。在大文档中这可能比较耗时；该函数不支持方法链。例如：$("a").find(".foo").live(...)是无效的，且无法按照预期正常工作；由于live()的事件处理函数全部附加到document对象上，因此在事件被处理之前，事件可能要经过最长最慢的事件路径；在由于平台或事件差异，有些事件不支持冒泡，从而无法冒泡传递到document，此时可能无法处理该事件；由于live()函数的事件处理函数全部附加在document对象上，如果通过某些方式解除了document对象上的事件绑定，可能会波及到使用live()函数委托绑定的其他元素的事件处理函数。例如$(document).off()。
//为div中的所有p元素的click事件绑定事件处理函数
$("div p").live("click",function(){
alert($(this).text());
});
$("#n1").append('<p id="n6">上述绑定的click事件对此元素也生效!</p>');//后添加的n6也可以触发上述click事件，因为它也是div中的p元素 （与bind不一样）
var data={id:1,name:"eric"};
var eventsMap = {
"mouseenter": function(event){
$(this).html( "你好!"+event.data.name);
},
"mouseleave": function(event){
$(this).html( "再见!"+event.data.name);
}
};
$("#n5").live( eventsMap,data);//为n5绑定mouseenter mouseleave两个事件（one和bind绑定方法可以不加上data，但是on和live要加上）
2.die()函数用于移除匹配元素上绑定的一个或多个事件的事件处理函数。die()函数主要用于解除由live()函数绑定的事件处理函数。
$("#n5").die();
3.delegate()函数用于为指定元素的一个或多个事件绑定事件处理函数。（从jQuery 1.7开始，请优先使用事件函数on()替代该函数。）
// 为div中的所有p元素绑定click事件处理程序
$("div").delegate("p","click",function(event){
alert($(this).text());
});
$("#n1").append('<p id="n6">上述绑定的click事件对此元素也生效!</p>');//后添加的n6也可以触发上述click事件，因为它也是div中的p元素
还可以同时绑定多个事件，并为事件处理函数传递一些附加的数据：
var data={id:1,name:"eric"};
var eventsMap = {
"mouseenter": function(event){
$(this).html( "你好!"+event.data.name);
},
"mouseleave": function(event){
$(this).html( "再见!"+event.data.name);
}
};
$("div").delegate("#n3",eventsMap,data);/为n5绑定mouseenter mouseleave两个事件（one和bind绑定方法可以不加上data，但是on和live和delegate要加上）
4.undelegate()函数用于移除元素上绑定的一个或多个事件的事件处理函数。undelegate()函数主要用于解除由delegate()函数绑定的事件处理函数。
//$("body").undelegate( );
$body.undelegate(":button", "click", btnClick2);
<body>
<div id="n1">
<p id="n2"><span>CodePlayer</span></p>
<p id="n3"><span>qinqin</span></p>
<em id="n4">http://www.365mini.com</em>
</div>
<p>id="n5">Google</p>
<input id="btn1" type="button" value="点击1" />
<input id="btn2" type="button" value="点击2" />
<a id="a1" href="#">CodePlayer</a>
<input id="btn" type="button" value="点击绑定一次" />
<div id="n2">
<p id="n6"><span>CodePlayer</span></p>
<p id="n7"><span>qinqin</span></p>
</div>
<div id="log"><div>
</body>
二、事件切换函数
|
方法名 |
说明 |
语法 （events 事件类型，data数据，handler 事件处理函数，selector 选择器） |
|
hover |
鼠标悬停事件。 |
jQueryObject.hover( handlerIn , handlerOut ) jQueryObject.hover( handlerInAndOut ) |
|
toggle |
为匹配元素的click事件绑定多个事件处理函数 |
jQueryObject.toggle( handler1, handler2 [, handlerN... ] ) |
1.hover()函数用于为每个匹配元素的hover事件绑定处理函数。hover事件就是鼠标悬停事件。
$("a").hover(function(){
$(this).css("color","red");//鼠标移上
}, function(){
$(this).css("color","blue"); //鼠标移开
});
2.toggle()是一个特殊的事件函数，用于为匹配元素的click事件绑定多个事件处理函数。每次触发click事件时，toggle()函数会轮流执行其中的一个事件处理函数。（jQuery还有一个同名的toggle()函数，用于切换元素的显示/隐藏。）
例如，我们使用toggle("click", A, B, C)为元素的click事件绑定了3个事件处理函数A、B、C。第一次点击执行A，第二次点击执行B，第三次点击执行C，第四次点击又执行A，第五次点击又执行B ……(如果调用了多次toggle()，它们之间是独立的)。删除通过toggle()绑定的事件，使用unbind()函数。例如:unbind("click")。
（从1.8开始被标记为已过时，并从1.9开始被移除。）
function handle1(){
alert("click1");
}
function handle2(){
alert("click2");
}
function handle3(){
alert("click3");
}
function handle4(){
alert("click4");
}
$("#btn1").toggle(handle1,handle2,handle3,handle4); //可循环切换
<body>
<div id="n1">
<p id="n2"><span>CodePlayer</span></p>
<p id="n3"><span>qinqin</span></p>
<em id="n4">http://www.365mini.com</em>
</div>
<p>id="n5">Google</p>
<input id="btn1" type="button" value="点击1" />
<input id="btn2" type="button" value="点击2" />
<a id="a1" href="#">CodePlayer</a>
<input id="btn" type="button" value="点击绑定一次" />
<div id="n2">
<p id="n6"><span>CodePlayer</span></p>
<p id="n7"><span>qinqin</span></p>
</div>
<div id="log"><div>
</body>
jquery事件之事件委托和事件切换的更多相关文章
- .NET面试题系列[7] - 委托与事件
委托和事件 委托在C#中具有无比重要的地位. C#中的委托可以说俯拾即是,从LINQ中的lambda表达式到(包括但不限于)winform,wpf中的各种事件都有着委托的身影.C#中如果没有了事件,那 ...
- C#编程之委托与事件四(二)【转】
C#编程之委托与事件(二) 我在上一篇文章(C#编程之委托与事件(一) )中通过示例结合的方法介绍了委托,在本文中,我同样以代码示例的方式来介绍C#里的事件机制. 二.事件 1.了解概 ...
- C#基本功之委托和事件
定义:委托是一种引用类型,表示对具有特定参数列表和返回类型的方法的引用. 在实例化委托时,你可以将其实例与任何具有兼容签名和返回类型的方法相关联 目的:方法声明和方法实现的分离,使得程序更容易扩展 一 ...
- c# 委托与事件的区别
委托与事件的区别 委托和事件没有可比性,因为委托是数据类型,事件是对象(可以理解为对委托变量的封装.),下面说的是委托的对象(用委托方式实现的事件)和(标准的event方式实现)事件的区别.事件的内部 ...
- 观察者设计模式（C#委托和事件的使用）
观察者设计模式定义了对象间的一种一对多的依赖关系,以便一个对象的状态发生变化时,所有依赖于它的对象都得到通知并自动刷新.在现实生活中的可见观察者模式,例如,微信中的订阅号,订阅博客和QQ微博中关注好友 ...
- jQuery事件绑定和委托
可以用多种方法实现,on() . bind() . live() . delegate() ,还有one(). 有时我们可能会像下面这样绑定一个事件: $("#div1"). ...
- 事件冒泡、事件委托、jQuery元素节点操作、滚轮事件与函数节流
一.事件冒泡定义 事件冒泡是指在一个对象触发某类事件(比如单击onclick事件),如果此对象定义了此事件的处理程序,那么此事件就会调用这个处理程序,如果没有定义此事件处理程序或者事件返回true,那 ...
- python 全栈开发，Day55(jQuery的位置信息,JS的事件流的概念(重点),事件对象,jQuery的事件绑定和解绑,事件委托(事件代理))
一.jQuery的位置信息 jQuery的位置信息跟JS的client系列.offset系列.scroll系列封装好的一些简便api. 一.宽度和高度 获取宽度 .width() 描述:为匹配的元素集 ...
- JavaScript和JQuery中的事件\委托链\事件冒泡\事件捕获,兼容所有浏览器
有做过北大青鸟培训讲师经验的我,如今在一家公司做技术部经理的职位,发现有很多程序员的基本功相当糟糕,在组织企业内部培训时讲解了一些案例,总结了一些经典代码,希望对自己和有需要的人提供一些帮助吧: Ja ...
随机推荐
- Hive- 大数据仓库Hive
什么是 Hive? Hive 是由 FaceBook 开源用于解决少量数据结构化日志的数据统计.Hive是基于 Hadoop 的一个数据仓库工具,可以将结构化的数据文件映射成一张表,并提供类SQL查询 ...
- cocos2d-x 3.9 android studio项目命令行打包
进入创建的项目的 proj.android-studio目录 cocos run/compile -p android --android-studio 这样就可以打包了
- POJ 1639 Picnic Planning：最小度限制生成树
题目链接:http://poj.org/problem?id=1639 题意: 给你一个无向图,n个节点,m条边,每条边有边权. 让你求一棵最小生成树,同时保证1号节点的度数<=k. 题解: 最 ...
- Jackson的用法实例分析
这篇文章主要介绍了Jackson的用法实例分析,用于处理Java的json格式数据非常实用,需要的朋友可以参考下 通俗的来说,Jackson是一个 Java 用来处理 JSON 格式数据的类库,其性能 ...
- 给手机发验证码 综合使用 （忘记密码处理 php发验证码 重置用户密码）
前台页面 提取手机号调用 jQuery的ajax,到发送验证码 [php] view plain copy <title>找回密码 - 2015年xxx报名系统</title> ...
- 继续学习：C语言关键字
auto :声明自动变量 break:跳出当前循环 case:开关语句分支 char :声明字符型变量或函数 const :声明只读变量 continue:结束当前循环,开始下一轮循环 default ...
- ffmpeg命令选项解释
ffmpeg作为媒体文件处理软件,基本用法如下: ffmpeg -i INPUTfile [OPTIONS] OUTPUTfile 输入输出文件通常就是待处理的多媒体文件了.可以是纯粹的音频文件,纯粹 ...
- BZOJ4976: [Lydsy1708月赛]宝石镶嵌
BZOJ4976: [Lydsy1708月赛]宝石镶嵌 https://lydsy.com/JudgeOnline/problem.php?id=4976 分析: 本来是从\(k\le 100\)这里 ...
- bzoj 4631: 踩气球 线段树
题目: Description 六一儿童节到了, SHUXK 被迫陪着M个熊孩子玩一个无聊的游戏:有N个盒子从左到右排成一排,第i个盒子里装着Ai个气球. SHUXK 要进行Q次操作,每次从某一个盒子 ...
- WPF如何更改系统控件的默认高亮颜色 （Highlight brush）
我们在用WPF时, 经常会对系统控件的默认高亮等等颜色进行更改. 以前通常是用controlTemplate来实现. 今天发现一个更合理或者简单的方法: 用系统默认颜色的key, 比如 SystemC ...