深入分析jQuery.one() 函数


Posted in jQuery onJune 03, 2020

one()函数用于为每个匹配元素的一个或多个事件绑定一次性事件处理函数。

此外,你还可以额外传递给事件处理函数一些所需的数据。

通过one()函数绑定的事件处理函数都是一次性的,只有首次触发事件时会执行该事件处理函数。触发之后,jQuery就会移除当前事件绑定。

此外,你可以为同一元素、同一事件类型绑定多个一次性的事件处理函数。触发事件时,jQuery会按照绑定的先后顺序依次执行绑定的事件处理函数。

要删除通过one()绑定的事件,请使用unbind()off()函数。

该函数属于jQuery对象(实例)。

语法

jQuery 1.1 新增该函数。one()函数主要有以下两种形式的用法:

用法一:

jQueryObject.one( events [, data ], handler )

为每个匹配元素的指定事件绑定事件处理函数。

用法二:jQuery 1.7 新增支持该用法。

jQueryObject.one( events , selector [, data ], handler )

在每个匹配元素上为所有符合指定选择器(selector)的后代元素的指定事件绑定事件处理函数。

用法三:jQuery 1.7 新增支持该用法。

jQueryObject.one( eventsMap [, selector ] [, data ] )

前面两种用法的变体。eventsMap是一个对象,其每个属性对应参数events,属性值对应参数handler

参数

参数 描述

events String类型一个或多个用空格分隔的事件类型和可选的命名空间,例如"click"、"focus click"、"keydown.myPlugin"。
data 可选/任意类型触发事件时,需要通过event.data传递给事件处理函数的任意数据。
handler Function类型指定的事件处理函数。
selector String类型一个jQuery选择器,用于指定哪些后代元素可以触发绑定的事件。
eventsMap Object类型一个Object对象,其每个属性对应事件类型和可选的命名空间(参数events),属性值对应绑定的事件处理函数(参数handler)。
从jQuery 1.7开始,one()函数的用法和on()函数是完全一致的,只不过通过one()函数绑定的都是一次性的事件处理函数。

关于参数events中可选的命名空间(1.4.3+才支持),请参考最下面的示例代码。

关于参数selector,你可以简单地理解为:如果该参数等于null或被省略,则为当前匹配元素绑定事件;否则就是为当前匹配元素的后代元素中符合selector选择器的元素绑定事件。

参数handler中的this指向当前匹配元素的后代元素中触发该事件的DOM元素。如果参数selector等于null或被省略,则this指向当前匹配元素(也就是该元素)。

on()还会为handler传入一个参数:表示当前事件的Event对象。

参数handler的返回值与DOM原生事件的处理函数返回值作用一致。例如"submit"(表单提交)事件的事件处理函数返回false,可以阻止表单的提交。

如果事件处理函数handler仅仅只为返回false值,可以直接将handler设为false。

如果当前元素有多个匹配selector的后代元素,其中只要有任意一个后代元素触发执行了事件处理函数,就会移除当前元素上的事件绑定,当前元素内符合条件的其他后代元素就无法再次触发执行。
返回值

one()函数的返回值为jQuery类型,返回当前jQuery对象本身。

示例&说明

请参考下面这段初始HTML代码:

<input id="btn" type="button" value="点击" />
<div id="n1">
<p id="n2">段落文本内容1</p>
<p id="n3">段落文本内容2</p>
<span id="n4">隐藏关卡</span>
</div>
<div id="n5">
<p id="n6">段落文本内容3</p>
<p id="n7">段落文本内容4</p>
</div>
<p id="n8">专注于编程开发技术分享</p>
我们为上述HTML中的按钮绑定一次性的click事件:

// 只有第一次点击时,执行该事件处理函数
// 执行后one()会立即移除绑定的事件处理函数
$("#btn").one("click", function(){
alert("只弹出一次提示框!");
});

运行代码(以下代码请自行复制到演示页面运行)

此外,我们还可以同时绑定多个事件,并为事件处理函数传递一些附加的数据,我们可以通过jQuery为事件处理函数传入的参数event(Event事件对象)来进行处理:

$("#n4").one("mouseenter mouseleave", obj, function(event){
var obj = event.data;
var $me = $(this);
if(event.type == "mouseenter"){
$me.html( obj.name + ',你碰到了隐藏关卡,获得' + obj.hidden + "金币!" );
}else{
$me.html( '你已通过该关卡!' );
}

});
网

此外,如果符合条件的元素是在one()函数执行后新添加的,绑定事件依然会对其生效。同样以初始HTML代码为例,我们可以编写如下jQuery代码:

注意:虽然下面的jQuery代码是为n1元素的所有后代p元素绑定click事件,但事件处理函数本身是绑定在n1元素上的,后代p元素的click事件是委托给n1元素来处理的。只要n2、n3、n9中任意一个触发了click事件,就会移除body元素上绑定的事件处理函数。也就是说,n2、n3、n9总共只能执行一次该事件处理函数。

// 在n1元素上为所有后代p元素的click事件绑定事件处理函数
// 只有n2、n3可以触发该事件
$("#n1").one("click", "p", function(event){
alert( $(this).text() );
});

//新添加的n9也可以触发上述click事件,因为它也是n1的后代p元素
$("#n1").append('<p id="n9">上述绑定的一次性click事件也会对该元素也生效!</p>');

请再参考以下jQuery代码。div元素有两个,因此每个div元素都为后代p元素的click事件绑定了事件处理函数。

// 在每个div元素上为其后代p元素的click事件绑定事件处理函数
// 只有n2、n3、n6、n7可以触发该事件
// n2和n3两者总共只能触发一次,n6和n7两者总共只能触发一次
$("div").one("click", "p", function(event){
alert( $(this).text() );
});

参数events还支持为事件类型附加额外的命名空间。当为同一元素绑定多个相同类型的事件处理函数时。使用命名空间,可以在触发事件、移除事件时限定触发或移除的范围。

function clickHandler(event){
alert( "触发时的命名空间:[" + event.namespace + "]");
}

var $p = $("p");

// A:为所有p元素绑定click事件,定义在foo和bar两个命名空间下
$p.one( "click.foo.bar", clickHandler );

// B:为所有p元素绑定click事件,定义在test命名空间下
$p.one( "click.test", clickHandler );

var $n2 = $("#n2");

/ 由于one()函数绑定的事件处理函数是一次性的,因此下面的每行代码只能分别执行,无法同时执行 /

// 触发所有click事件
$n2.trigger("click"); // 触发A和B (event.namespace = "")

// 触发定义在foo命名空间下的click事件
// $n2.trigger("click.foo"); // 触发A (event.namespace = "foo")
// 触发定义在bar命名空间下的click事件
// $n2.trigger("click.bar"); // 触发A (event.namespace = "bar")
// 触发同时定义在foo和bar两个命名空间下的click事件
// $n2.trigger("click.foo.bar"); // 触发A (event.namespace = "bar.foo")

// 触发定义在test命名空间下的click事件
// $n2.trigger("click.test"); // 触发B (event.namespace = "test")
one()函数的参数eventsMap是一个对象,可以"属性-值"的方式指定多个"事件类型-处理函数"。对应的示例代码如下:

var eventsMap = {
"mouseenter": function(event){
$(this).html( "Hello!");
},

"mouseleave": function(event){
 $(this).html( "Bye!");
}
};

//为n5绑定mouseenter mouseleave两个事件
$("#n5").one( eventsMap );

以上就是深入分析jQuery.one() 函数的详细内容,更多关于jQuery.one() 函数的资料请关注三水点靠木其它相关文章!

jQuery 相关文章推荐
HTML5+jQuery实现搜索智能匹配功能
Mar 24 jQuery
如何选择jQuery版本 1.x? 2.x? 3.x?
Apr 01 jQuery
jQuery EasyUI tree增加搜索功能的实现方法
Apr 27 jQuery
jquery 禁止鼠标右键并监听右键事件
Apr 27 jQuery
jquery.uploadifive插件怎么解决上传限制图片或文件大小问题
May 08 jQuery
jQuery选择器中的特殊符号处理方法
Sep 08 jQuery
vue-cli 引入jQuery,Bootstrap,popper的方法
Sep 03 jQuery
jQuery内容选择器与表单选择器实例分析
Jun 28 jQuery
jQuery HTML获取内容和属性操作实例分析
May 20 jQuery
jQuery+css实现的点击图片放大缩小预览功能示例【图片预览 查看大图】
May 29 jQuery
jQuery 动态粒子效果示例代码
Jul 07 jQuery
jquery实现淡入淡出轮播图效果
Dec 13 jQuery
jQuery+Ajax+js实现请求json格式数据并渲染到html页面操作示例
Jun 02 #jQuery
jQuery实现倒计时功能完整示例
Jun 01 #jQuery
jQuery cookie的公共方法封装和使用示例
Jun 01 #jQuery
JQuery获得内容和属性方法解析
May 30 #jQuery
jQuery实现视频展示效果
May 30 #jQuery
基于JavaScript或jQuery实现网站夜间/高亮模式
May 30 #jQuery
Jquery+AJAX实现无刷新上传并重命名文件操作示例【PHP后台接收】
May 29 #jQuery
You might like
PHP中对数据库操作的封装
2006/10/09 PHP
PHP分页类集锦
2014/11/18 PHP
Laravel 框架路由原理与路由访问实例分析
2020/04/14 PHP
原生js实现给指定元素的后面追加内容
2013/04/10 Javascript
javascript中的if语句使用介绍
2013/11/20 Javascript
JQuery获取表格数据示例代码
2014/05/26 Javascript
node.js中的fs.readdir方法使用说明
2014/12/17 Javascript
理解javascript回调函数
2014/12/28 Javascript
Jquery轮播效果实现过程解析
2016/03/30 Javascript
jQuey将序列化对象在前台显示地实现代码(方法总结)
2016/12/13 Javascript
Postman的下载及安装教程详解
2018/10/16 Javascript
vue.js中使用echarts实现数据动态刷新功能
2019/04/16 Javascript
vue router 通过路由来实现切换头部标题功能
2019/04/24 Javascript
bootstrap table列和表头对不齐的解决方法
2019/07/19 Javascript
js实现倒计时秒杀效果
2020/03/25 Javascript
深入了解JavaScript词法作用域
2020/07/29 Javascript
Vue按时间段查询数据组件使用详解
2020/08/21 Javascript
python抓取某汽车网数据解析html存入excel示例
2013/12/04 Python
Python递归遍历列表及输出的实现方法
2015/05/19 Python
Python读取图片属性信息的实现方法
2016/09/11 Python
Python 爬虫学习笔记之单线程爬虫
2016/09/21 Python
Python标准模块--ContextManager上下文管理器的具体用法
2017/11/27 Python
Python判断文件和字符串编码类型的实例
2017/12/21 Python
用TensorFlow实现多类支持向量机的示例代码
2018/04/28 Python
python 去除二维数组/二维列表中的重复行方法
2019/01/23 Python
一篇文章弄懂Python中的可迭代对象、迭代器和生成器
2019/08/12 Python
如何分离django中的媒体、静态文件和网页
2019/11/12 Python
大韩航空官方网站:Korean Air
2017/10/25 全球购物
Linux面试题LINUX系统类
2015/11/25 面试题
财务主管自我鉴定
2014/01/17 职场文书
职业生涯规划书范文
2014/03/10 职场文书
《二泉映月》教学反思
2014/04/15 职场文书
奥林匹克运动会口号
2014/06/19 职场文书
大学生个人总结范文
2015/02/15 职场文书
简单总结SpringMVC拦截器的使用方法
2021/06/28 Java/Android
SpringBoot整合minio快速入门教程(代码示例)
2022/04/03 Java/Android