深入分析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 相关文章推荐
浅谈struts1 &amp; jquery form 文件异步上传
May 25 jQuery
jquery实现一个全局计时器(商城可用)
Jun 30 jQuery
jQuery绑定事件方法及区别(bind,click,on,live,one)
Aug 14 jQuery
jQuery实现广告条滚动效果
Aug 22 jQuery
jquery中有哪些api jQuery主要API
Nov 20 jQuery
判断jQuery是否加载完成,没完成继续判断的解决方法
Dec 06 jQuery
jquery自定义显示消息数量
Dec 19 jQuery
基于jquery实现左右上下移动效果
May 02 jQuery
jQuery实现ajax的嵌套请求案例分析
Feb 16 jQuery
jquery实现购物车基本功能
Oct 25 jQuery
jQuery 选择器用法基础入门示例
Jan 04 jQuery
jquery插件实现悬浮的菜单
Apr 24 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判断服务器是否支持Gzip压缩功能
2013/09/24 PHP
php版本的cron定时任务执行器使用实例
2014/08/19 PHP
php获取当月最后一天函数分享
2015/02/02 PHP
php计算函数执行时间的方法
2015/03/20 PHP
PHP双向链表定义与用法示例
2018/01/31 PHP
PHP运用foreach神奇的转换数组(实例讲解)
2018/02/01 PHP
初试jQuery EasyUI 使用介绍
2010/04/01 Javascript
基于jquery &amp; json的省市区联动代码
2012/06/26 Javascript
jquery ajax例子返回值详解
2012/09/11 Javascript
jQuery实现页面滚动时层智能浮动定位实例探讨
2013/03/29 Javascript
纯Javascript实现Windows 8 Metro风格实现
2013/10/15 Javascript
jQuery实现复选框全选/取消全选/反选及获得选择的值
2014/06/12 Javascript
JavaScript设计模式之单例模式实例
2014/09/24 Javascript
JS实现倒计时和文字滚动的效果实例
2014/10/29 Javascript
详解使用Vue Router导航钩子与Vuex来实现后退状态保存
2017/09/11 Javascript
微信小程序排坑指南详解
2018/05/23 Javascript
ndm:NPM的桌面GUI应用程序
2018/10/15 Javascript
Element-UI踩坑之Pagination组件的使用
2018/10/29 Javascript
JavaScript JMap类定义与使用方法示例
2019/01/22 Javascript
vue.js表单验证插件(vee-validate)的使用教程详解
2019/05/23 Javascript
Vue的属性、方法、生命周期实例代码详解
2019/09/17 Javascript
python中requests模块的使用方法
2015/04/08 Python
详解常用查找数据结构及算法(Python实现)
2016/12/09 Python
django rest framework vue 实现用户登录详解
2019/07/29 Python
Python二次规划和线性规划使用实例
2019/12/09 Python
python tkinter 设置窗口大小不可缩放实例
2020/03/04 Python
django Model层常用验证器及自定义验证器详解
2020/07/15 Python
django教程如何自学
2020/07/31 Python
解决Python3.8运行tornado项目报NotImplementedError错误
2020/09/02 Python
静态成员和非静态成员的区别
2012/05/12 面试题
大学生文员专业个人求职信范文
2014/01/05 职场文书
房地产项目建议书
2014/03/12 职场文书
党员个人对照检查材料范文
2014/09/24 职场文书
青年文明号申报材料
2014/12/23 职场文书
投资公司董事长岗位职责
2015/04/16 职场文书