深入分析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 相关文章推荐
如何选择jQuery版本 1.x? 2.x? 3.x?
Apr 01 jQuery
jQuery中的deferred对象和extend方法详解
May 08 jQuery
jquery ajaxfileupload异步上传插件
Nov 21 jQuery
jQuery实现的上传图片本地预览效果简单示例
Mar 29 jQuery
jquery引入外部CDN 加载失败则引入本地jq库
May 23 jQuery
jQuery实现百度图片移入移出内容提示框上下左右移动的效果
Jun 05 jQuery
基于jquery实现九宫格拼图小游戏
Nov 30 jQuery
使用jquery模拟a标签的click事件无法实现跳转的解决
Dec 04 jQuery
使用异步controller与jQuery实现卷帘式分页
Jun 18 jQuery
基于JQuery实现页面定时弹出广告
May 08 jQuery
如何基于jQuery实现五角星评分
Sep 02 jQuery
jQuery实现朋友圈查看图片
Sep 11 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的命令行命令使用指南
2015/08/18 PHP
golang 调用 php7详解及实例
2017/01/04 PHP
javascript 使用 NodeList需要注意的问题
2013/03/04 Javascript
jQuery toggle 代替方法
2016/03/22 Javascript
JavaScript学习笔记之数组去重
2016/03/23 Javascript
基于JS+Canves实现点击按钮水波纹效果
2016/09/15 Javascript
详解Angular-Cli中引用第三方库
2017/05/21 Javascript
jquery实现放大镜简洁代码(推荐)
2017/06/08 jQuery
angular.js4使用 RxJS 处理多个 Http 请求
2017/09/23 Javascript
vuejs实现递归树型菜单组件
2018/01/13 Javascript
Vue 仿QQ左滑删除组件功能
2018/03/12 Javascript
对vux点击事件的优化详解
2018/08/28 Javascript
jQuery常见的遍历DOM操作详解
2018/09/05 jQuery
JQuery实现ajax请求的示例和注意事项
2018/12/10 jQuery
express express-session的使用小结
2018/12/12 Javascript
puppeteer实现html截图的示例代码
2019/01/10 Javascript
babel7.x和webpack4.x配置vue项目的方法步骤
2019/05/12 Javascript
解决Python传递中文参数的问题
2015/08/04 Python
Python实现合并同一个文件夹下所有txt文件的方法示例
2018/04/26 Python
Python实现调用另一个路径下py文件中的函数方法总结
2018/06/07 Python
基于python求两个列表的并集.交集.差集
2020/02/10 Python
关于Python 中的时间处理包datetime和arrow的方法详解
2020/03/19 Python
简述 Python 的类和对象
2020/08/21 Python
通过实例解析python and和or使用方法
2020/11/14 Python
美国最大的团购网站:Groupon
2016/07/23 全球购物
日本乐天官方海外转运服务:Rakuten Global Express
2018/11/30 全球购物
远程学习的教学用品和家庭学习资源:Really Good Stuff
2020/04/27 全球购物
巴西最大的运动品牌:Olympikus
2020/07/14 全球购物
大学生演讲稿范文
2014/01/11 职场文书
宣传保护环境的公益广告词
2014/03/13 职场文书
2014乡镇机关党员个人对照检查材料思想汇报
2014/10/09 职场文书
2015年创先争优活动总结
2015/03/27 职场文书
税务会计岗位职责
2015/04/02 职场文书
党员转正意见怎么写
2015/06/03 职场文书
排球赛新闻稿
2015/07/17 职场文书
mysql对于模糊查询like的一些汇总
2021/05/09 MySQL