深入分析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实现的动态文字变化输出效果示例【附演示与demo源码下载】
Mar 24 jQuery
jQuery Validate 校验多个相同name的方法
May 18 jQuery
浅谈事件冒泡、事件委托、jQuery元素节点操作、滚轮事件与函数节流
Jul 22 jQuery
jQuery实现对网页节点的增删改查功能示例
Sep 18 jQuery
JS和JQuery实现雪花飘落效果
Nov 30 jQuery
jQuery仿移动端支付宝键盘的实现代码
Aug 15 jQuery
jQuery的ztree仿windows文件新建和拖拽功能的实现代码
Dec 05 jQuery
JQuery Ajax执行跨域请求数据的解决方案
Dec 10 jQuery
详解jQuery设置内容和属性
Apr 11 jQuery
JQuery获取可视区尺寸和文档尺寸及制作悬浮菜单示例
May 14 jQuery
jquery+css实现Tab栏切换的代码实例
May 14 jQuery
jquery实现有过渡效果的tab切换
Jul 17 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
百度地图API使用方法详解
2015/08/25 PHP
关于PHP 如何用 curl 读取 HTTP chunked 数据
2016/02/26 PHP
php判断是否为ajax请求的方法
2016/11/29 PHP
JS 巧妙获取剪贴板数据 Excel数据的粘贴
2009/07/09 Javascript
JavaScript和ActionScript的交互实现代码
2010/08/01 Javascript
js自定义事件代码说明
2011/01/31 Javascript
jquery Ajax 实现加载数据前动画效果的示例代码
2014/02/07 Javascript
根据当前时间在jsp页面上显示上午或下午
2014/08/18 Javascript
js css 实现遮罩层覆盖其他页面元素附图
2014/09/22 Javascript
javascript框架设计读书笔记之数组的扩展与修复
2014/12/02 Javascript
使用Jquery实现每日签到功能
2015/04/03 Javascript
js带缩略图的图片轮播效果代码分享
2015/09/14 Javascript
关于RequireJS的简单介绍即使用方法
2016/10/20 Javascript
jQuery网页定位导航特效实现方法
2016/12/19 Javascript
微信小程序  checkbox组件详解及简单实例
2017/01/10 Javascript
详解使用nvm安装node.js
2017/07/18 Javascript
纯JS实现出生日期[年月日]下拉菜单效果
2018/06/01 Javascript
vue 项目接口管理的实现
2019/01/17 Javascript
微信小程序下拉加载和上拉刷新两种实现方法详解
2019/09/05 Javascript
Vue搭建后台系统需要注意的问题
2019/11/08 Javascript
Python脚本实现网卡流量监控
2015/02/14 Python
深入浅析Python字符编码
2015/11/12 Python
使用python读取txt文件的内容,并删除重复的行数方法
2018/04/18 Python
python+selenium 脚本实现每天自动登记的思路详解
2020/03/11 Python
Django-xadmin后台导入json数据及后台显示信息图标和主题更改方式
2020/03/11 Python
Python count函数使用方法实例解析
2020/03/23 Python
CSS去掉A标签(链接)虚线框的方法
2014/04/01 HTML / CSS
澳大利亚家具和家居用品在线商店:Interiors Online
2018/03/05 全球购物
台湾网友喜爱的综合型网路购物商城:Yahoo! 奇摩购物中心
2018/03/10 全球购物
Zooplus葡萄牙:欧洲领先的网上宠物商店
2018/07/01 全球购物
Ibatis的核心配置文件都有什么
2014/09/08 面试题
入团者的自我评价分享
2013/12/02 职场文书
运动会表扬稿大全
2014/01/16 职场文书
小学新学期教师寄语
2014/01/18 职场文书
西安兵马俑导游词
2015/02/02 职场文书
2016暑期校本培训心得体会
2016/01/08 职场文书