第一百七十一节,jQuery,高级事件,模拟操作,命名空间,事件委托,on、off 和 one
jQuery,高级事件,模拟操作,命名空间,事件委托,on、off 和 one
学习要点:
1.模拟操作
2.命名空间
3.事件委托
4.on、off 和 one
jQuery 不但封装了大量常用的事件处理,还提供了不少高级事件方便开发者使用。比 如模拟用户触发事件、事件委托事件、和统一整合的 on 和 off,以及仅执行一次的 one 方 法。这些方法大大降低了开发者难度,提升了开发者的开发体验。
一.模拟操作
在事件触发的时候,有时我们需要一些模拟用户行为的操作。例如:当网页加载完毕后 自行点击一个按钮触发一个事件,而不是用户去点击。
trigger()方法,模拟事件操作,不阻止默认行为和冒泡,浏览器自动模拟用户行为,在要模拟的对象上使用,参数是要模拟的事件名称,还有可选参数,与原始事件对应
//点击按钮事件
$('input').click(function () {
alert('我的第一次点击来自模拟!');
});
//模拟用户点击行为
$('input').trigger('click');
//可以合并两个方法
$('input').click(function () {
alert('我的第一次点击来自模拟!');
}).trigger('click');
有时在模拟用户行为的时候,我们需要给事件执行传递参数,这个参数类似与 event.data 的额外数据,可以可以是数字、字符串、数组、对象。
$('input').click(function (e, data1, data2) {
alert(data1 + ',' + data2);
}).trigger('click', ['abc', '123']);
注意:当传递一个值的时候,直接传递即可。当两个值以上,需要在前后用中括号包含 起来。但不能认为是数组形式,下面给出一个复杂的说明。
$('input').click(function (e, data1, data2) {
alert(data1.a + ',' + data2[1]);
}).trigger('click', [{'a': '1', 'b': '2'}, ['123', '456']]);
模拟自定义事件
除了通过 JavaScript 事件名触发,也可以通过自定义的事件触发,所谓自定义事件其实 就是一个被.bind()绑定的任意函数。
$('input').bind('myEvent', function () {
alert('自定义事件!');
}).trigger('myEvent');
trigger()方法提供了简写方案,只要想让某个事件执行模拟用户行为,直接再调用一个 空的同名事件即可。
$('input').click(function () {
alert('我的第一次点击来自模拟!');
}).click(); //空的 click()执行的是 trigger()
这种便捷的方法,jQuery 几乎所有常用的事件都提供了。
triggerHandler()方法,模拟事件操作,阻止默认行为和阻止冒泡,浏览器自动模拟用户行为,在要模拟的对象上使用,参数是要模拟的事件名称,与原始事件对应
jQuery 还提供了另外一个模拟用户行为的方法:.triggerHandler();这个方法的使用 和.trigger()方法一样。
$('input').click(function () {
alert('我的第一次点击来自模拟!');
}).triggerHandler('click');
在常规的使用情况下,两者几乎没有区别,都是模拟用户行为,也可以可以传递额外参 数。但在某些特殊情况下,就产生了差异:
1..triggerHandler()方法并不会触发事件的默认行为,而.trigger()会。
$('form').trigger('submit'); //模拟用户执行提交,并跳转到执行页面
$('form').triggerHandler('submit'); //模拟用户执行提交,并阻止的默认行为
如果我们希望使用.trigger()来模拟用户提交,并且阻止事件的默认行为,则需要这么写:
$('form').submit(function (e) {
e.preventDefault(); //阻止默认行为
}).trigger('submit');
2..triggerHandler()方法只会影响第一个匹配到的元素,而.trigger()会影响所有。
3..triggerHandler()方法会返回当前事件执行的返回值,如果没有返回值,则返回 undefined;而.trigger()则返回当前包含事件触发元素的 jQuery 对象(方便链式连缀调用)。
alert($('input').click(function () {
return 123;
}).triggerHandler('click')); //返回 123,没有 return 返回
4..trigger()在创建事件的时候,会冒泡。但这种冒泡是自定义事件才能体现出来,是 jQuery 扩展于 DOM 的机制,并非 DOM 特性。而.triggerHandler()不会冒泡。
var index = 1;
$('div').bind('myEvent',function(){
alert('自定义事件' + index);
index++;
});
$('.div3').trigger("myEvent");
二.命名空间
有时,我们想对事件进行移除。但对于同名同元素绑定的事件移除往往比较麻烦,这个 时候,可以使用事件的命名空间解决。
$('input').bind('click.abc', function () {
alert('abc');
});
$('input').bind('click.xyz', function () {
alert('xyz');
});
$('input').unbind('click.abc'); //移除 click 实践中命名空间为 abc 的
注意:也可以直接使用('.abc'),这样的话,可以移除相同命名空间的不同事件。对于模 拟操作.trigger()和.triggerHandler(),用法也是一样的。
$('input').trigger('click.abc');
三.事件委托
什么是事件委托?用现实中的理解就是:有 100 个学生同时在某天中午收到快递,但这 100 个学生不可能同时站在学校门口等,那么都会委托门卫去收取,然后再逐个交给学生。 而在 jQuery 中,我们通过事件冒泡的特性,让子元素绑定的事件冒泡到父元素(或祖先元素) 上,然后再进行相关处理即可。
如果一个企业级应用做报表处理,表格有 2000 行,每一行都有一个按钮处理。如果用 之前的.bind()处理,那么就需要绑定 2000 个事件,就好比 2000 个学生同时站在学校门口等 快递,不断会堵塞路口,还会发生各种意外。这种情况放到页面上也是一样,可能导致页面 极度变慢或直接异常。而且,2000 个按钮使用 ajax 分页的话,.bind()方法无法动态绑定尚 未存在的元素。就好比,新转学的学生,快递员无法验证他的身份,就可能收不到快递。
也就是说当很多元素需要绑定相同事件时,用传统的bind()方法,就需要一个一个的去绑定,新增的元素还无法实现,而是事件委托就只绑定父元素即可,而且还支持父元素下新添加的元素自动也绑定事件
传统事件绑定
HTML
<div style="background:red;width:200px;height:200px;" id="box">
<input type="button" value="按钮" class="button"/>
<input type="button" value="按钮" class="button"/>
<input type="button" value="按钮" class="button"/>
</div>
js
$('.button').bind('click', function () {
$(this).clone().appendTo('#box'); //点击后克隆当前元素,添加到当前元素后面
});
以上列子,只有原始的3个元素有效,后面克隆出来的,就无法再克隆了
delegate()方法,事件委托方法,绑定上级元素事件,上级元素会自动将事件传递给下级里所有指定的元素,而且还支持上级元素下新添加的指定元素也传递事件,支持连缀
在上级元素上使用,参数1下级要传递事件的元素,参数2事件名称,参数3事件函数
$('#box').delegate('.button', 'click', function () {
$(this).clone().appendTo('#box');
});
以上列子,克隆出来的,也能再克隆了
undelegate()方法,解除事件委托方法,解除后不再执行事件委托
$('#box').delegate('.button', 'click', function () {
$(this).clone().appendTo('#box');
});
$('#box').undelegate('.button', 'click');
注意:.delegate()需要指定父元素,然后第一个参数是当前元素,第二个参数是事件方 式,第三个参数是执行函数。和.bind()方法一样,可以传递额外参数。.undelegate()和.unbind() 方法一样可以直接删除所有事件,比如:.undelegate('click')。也可以删除命名空间的事件, 比如:.undelegate('click.abc')。
四.on(绑定事件)、off(删除事件) 和 one(绑定事件使用一次后自动删除)
目前绑定事件和解绑的方法有三组共六个。由于这三组的共存可能会造成一定的混乱, 为此 jQuery1.7 以后推出了.on()和.off()方法彻底摒弃前面三组。
on()方法绑定事件,替代.bind()方式,参数与bind()相同,增加了事件委托
//替代.bind()方式
$('.button').on('click', function () {
alert('替代.bind()');
});
//替代.bind()方式,并使用额外数据和事件对象
$('.button').on('click', {user: 'Lee'}, function (e) {
alert('替代.bind()' + e.data.user);
});
//替代.bind()方式,并绑定多个事件
$('.button').on('mouseover mouseout', function () {
alert('替代.bind()移入移出!');
});
//替代.bind()方式,以对象模式绑定多个事件
$('.button').on({
mouseover: function () {
alert('替代.bind()移入!');
},
mouseout: function () {
alert('替代.bind()移出!');
}
});
//替代.bind()方式,阻止默认行为并取消冒泡
$('form').on('submit', function () {
return false;
});
//或
$('form').on('submit', false);
//替代.bind()方式,阻止默认行为
$('form').on('submit', function (e) {
e.preventDefault();
});
//替代.bind()方式,取消冒泡
$('form').on('submit', function (e) {
e.stopPropagation();
});
on()方法事件委托,取代delegate()方法,被委托元素上使用,参数1事件名称,参数2是委托元素也就是要传递事件的元素,参数3是执行函数
$('#box').on('click', '.button', function () {
$(this).clone().appendTo('#box');
})
off()方法,替代.unbind()方式,移除事件
$('.button').off('click');
$('.button').off('click', fn);
$('.button').off('click.abc');
off()方法取消委托,替代undelegate()事件,在被委托元素上使用,参数1事件名称,参数2委托元素、也就是要传递事件的元素
$('#box').off('click', '.button');
注意:和之前方式一样,事件委托和取消事件委托也有各种搭配方式,比如额外数据、 命名空间等等,这里不在赘述。
不管是.bind()还是.on(),绑定事件后都不是自动移除事件的,需要通过.unbind()和.off() 来手工移除。jQuery 提供了.one()方法,绑定元素执行完毕后自动移除事件,可以方法仅触 发一次的事件。
one()方法,绑定元素执行完毕后自动移除事件,只执行一次事件
//类似于.bind()只触发一次
$('.button').one('click', function () {
alert('one 仅触发一次!');
});
one()方法事件委托,执行一次后自动移除,参数2是委托元素
$('#box').one('click', '.button', function () {
alert('one 仅触发一次!');
});
第一百七十一节,jQuery,高级事件,模拟操作,命名空间,事件委托,on、off 和 one的更多相关文章
- 第三百七十一节,Python分布式爬虫打造搜索引擎Scrapy精讲—elasticsearch(搜索引擎)用Django实现我的搜索以及热门搜索
第三百七十一节,Python分布式爬虫打造搜索引擎Scrapy精讲—elasticsearch(搜索引擎)用Django实现我的搜索以及热门 我的搜素简单实现原理我们可以用js来实现,首先用js获取到 ...
- 第一百二十一节,JavaScript事件绑定及深入
JavaScript事件绑定及深入 学习要点: 1.传统事件绑定的问题 2.W3C事件处理函数 3.IE事件处理函数 4.事件对象的其他补充 事件绑定分为两种:一种是传统事件绑定(内联模型,脚本模型) ...
- 第一百六十一节,封装库--JavaScript,完整封装库文件
封装库--JavaScript,完整封装库文件 /** *feng_zhuang_ku_1.0版本,js封装库,2016/12/29日:林贵秀 **/ /** 前台调用 * 每次调用$()创建库对象, ...
- 第一百七十节,jQuery,事件对象,event 对象,默认行为,冒泡
jQuery,事件对象,event 对象,默认行为,冒泡 学习要点: 1.事件对象 2.冒泡和默认行为 JavaScript 在事件处理函数中默认传递了 event 对象,也就是事件对象.但由于浏览器 ...
- 第一百九十一节,jQuery EasyUI 入门
jQuery EasyUI 入门 学习要点: 1.什么是 jQuery EasyUI 2.学习 jQuery EasyUI 的条件 3.jQuery EasyUI 的功能和优势 4.其他的 UI 插件 ...
- 第一百七十七节,jQuery,知问前端--概述及 jQuery UI
jQuery,知问前端--概述及 jQuery UI 学习要点: 1.项目介绍 2.jQuery UI 3.UI 主题 一.项目介绍 我们重点仿照“知乎”的架构模式来搭建界面和布局,以及大部分前端功能 ...
- 第一百八十一节,jQuery-UI,知问前端--自动补全 UI--邮箱自动补全
jQuery-UI,知问前端--自动补全 UI--邮箱自动补全 学习要点: 1.调用 autocomplete()方法 2.修改 autocomplete()样式 3.autocomplete()方法 ...
- 第一百七十二节,jQuery,动画效果
jQuery,动画效果 学习要点: 1.显示.隐藏 2.滑动.卷动 3.淡入.淡出 4.自定义动画 5.列队动画方法 6.动画相关方法 7.动画全局属性 一.显示.隐藏 jQuery 中显示方法为:. ...
- 第一百三十一节,JavaScript,封装库--CSS
JavaScript,封装库--CSS 将封装库里的方法,改成了原型添加方法 增加4个方法 tian_jia_class()方法,给获取到的元素添加class属性,参数是class属性值,可以连缀1 ...
随机推荐
- JS面向对象之作用域
作用域 词法作用域 作用域 域表示的就是范围,即作用范围 就是一个名字在什么地方能使用,在什么地方不能使用 块级作用域 块级别的作用范围 // 在 c , java 等编程语言中,下面的语法报错 { ...
- ZK的数据结构特点
ZK的数据结构特点 ZooKeeper这种数据结构有如下这些特点: 1. 每个子目录项如NameService都被称作znode,这个znode是被它所在的路径唯一标识,如Server1这个znode ...
- 【MyEcplise】导入项目后,会定时弹出一下错误MyEcplise tern was unable to complete your request in time.This couble happen if your project contains several large javaScript libraies.
Myecplise弹出错误如下: 错误代码: MyEcplise tern was unable to complete your request in time.This couble happen ...
- ios(iphone/ipad)一个简单的用代码判断当前设备的方法
直接NSLog(@"current_device:%@",[UIDevice currentDevice].model); 即可看出它输出的是当前设备,所以根据这个字符串可简单的判 ...
- Zabbix的SNMPTrap监控配置
SNMPTrap监控主要用于设备发生故障时的主动通知的监控.以下简单记录下Zabbix的SNMPTrap的配置方法. 一.SNMPTrap监控的处理流程说明 1.监控对象发送SNMPTrap信息到sn ...
- 一起來玩鳥 Starling Framework(2)效能測試以及Image與Texture
上一篇我們放了一個Quad與TextField在舞台上慢慢轉.眼尖的可能會發現轉起來邊緣有點鋸齒,這可以透過設定Starling的反鋸齒來解決,在Main.as裡,新增了_starling之後,可以加 ...
- Python图像处理(8):边缘检測
快乐虾 http://blog.csdn.net/lights_joy/ 欢迎转载,但请保留作者信息 此前已经得到了单个区域植株图像,接下来似乎应该尝试对这些区域进行分类识别.通过外形和叶脉进行植物种 ...
- 如何在Ubuntu上使用Glances监控系统
导读 Glances 是一个用于监控系统的跨平台.基于文本模式的命令行工具.它是用 Python 编写的,使用 psutil 库从系统获取信息.你可以用它来监控 CPU.平均负载.内存.网络接口.磁盘 ...
- RocketMQ之broker读取本地文件数据
这个load操作发生在启动broker的时候. 所以我们直接进入DefaultMessageStore的load()方法: /** * 加载数据 * * @throws IOException */ ...
- docker集群——搭建Mesos+Zookeeper+Marathon的Docker管理平台
服务器架构 机器信息: 这里部属的机器为3个Master控制节点,3个slave运行节点,其中: zookeeper.Mesos-master.marathon运行在Master端:Mesos-sla ...