jquery的命名空间

简介: function A( event ){    alert( 'A' );}function B( event ){    alert( 'B' );}function C( event ){    alert( 'C' );}var $btn1 = $("#btn1");// 为btn1元素的click事件绑定事件处理函数$btn1.
function A( event ){
    alert( 'A' );
}
function B( event ){
    alert( 'B' );
}
function C( event ){
    alert( 'C' );
}

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

// 为btn1元素的click事件绑定事件处理函数
$btn1.bind( "click.foo.bar", A );
$btn1.bind( "click.test.foo", B );
$btn1.bind( "click.test", C );




// 触发btn1的click事件,不限定命名空间
$btn1.trigger("click"); // 触发A、B、C

// 触发btn1的包含命名空间foo的click事件
$btn1.trigger("click.foo"); // 触发A、B

// 触发btn1的包含命名空间test的click事件
$btn1.trigger("click.test"); // 触发B、C

// 触发btn1的同时包含命名空间foo和test的click事件
$btn1.trigger("click.foo.test"); // 触发B

$(“#haorooms”).on("click.a",function(){}); $(“#haorooms”).on("click.a.bb",function(){}); $(“#haorooms”).on("dbclick.a",function(){}); $(“#haorooms”).on("mouseover.a",function(){}); $(“#haorooms”).on("mouseout.a",function(){});

当然,我们也可以用bind进行事件绑定。我们看到上面的代码,我们可以在事件后面,以点号,加我们的名字,就是事件命名空间。所谓事件命名空间,就是事件类型后面以点语法附加一个别名,以便引用事件,如”click.a”,其中”a”就是click当前事件类型的别名,即事件命名空间。

假如我们要删除如下命名空间:

$(“#haorooms”).on("click.a.bb",function(){});

我们可以用:

$(“#haorooms”).off("click.a.bb");//直接删除bb命名空间 【推荐】 $(“#haorooms”).off(".bb"); //直接删除bb命名空间 【推荐】 $(“#haorooms”).off(".a"); //删除.a命名空间下面所有的子空间【包括.a.bb .a.cc等等,.a是.bb的父级,因此.a下面的都会删掉】 $(“#haorooms”).off("click");//直接解绑click,下面的命名空间都会删除。

要注意的是:

假如我们写了如下代码:

$(“#haorooms”).on("click",function(){}); $(“#haorooms”).on("click.a",function(){}); $(“#haorooms”).on("click.a.bb",function(){});

那么我们要用trigger触发click事件,也就是触发第一个,岂不是把click.a和click.a.bb都触发了,那如何解决这个问题呢,我只想触发click,而不触发click.a及以下的命名空间?

没关系! 有如下解决办法:

如果事件类型后面附加感叹号,则表示触发不包含命名空间的特定事件类型。

假如我们只想触发click,可以这么写:

$(“#haorooms”).trigger("click!")

只触发bb,可以这么写:

$(“#haorooms”).trigger("click.a.bb");

有了命名空间,可以方便我们在同一个事件上面做管理啦!!!



目录
相关文章
|
前端开发 JavaScript
jQuery命名空间和自定义插件的的多种方法
jQuery插件的开发包括两种: 一种是类级别的插件开发,即给jquery添加新的全局函数,相当于给jQuery类本身添加方法。jQuery的全局函数就是属于jQuery命名空间的函数,另一种是对象级别的插件开发,即给jQuery对象添加方法。
1234 0
|
JavaScript
jQuery高级事件---模拟操作和命名空间
版权声明:本文为博主原创文章,转载请注明出处。 https://blog.csdn.net/twilight_karl/article/details/73335845 模拟操作 trigger() 浏览器自行触发事件.例如:当网页加载完毕后浏览器自行点击一个按钮触发一个事件,而不是用户去点击。
946 0
|
3月前
|
JavaScript 前端开发
百叶窗效果的jQuery幻灯片插件
百叶窗效果的jQuery幻灯片插件
|
3月前
|
JavaScript
jquery无限循环内容滑块插件
jquery无限循环内容滑块插件
|
3月前
|
JavaScript
简单轻量级的jquery图表插件
简单轻量级的jquery图表插件
|
3月前
|
JavaScript
jQuery响应式内容选项卡插件
jQuery响应式内容选项卡插件
|
3月前
|
JavaScript 前端开发
带完成百分比的jQuery表单插件
带完成百分比的jQuery表单插件
|
3月前
|
JavaScript 内存技术
支持多种动画特效的响应式jQuery幻灯片插件
支持多种动画特效的响应式jQuery幻灯片插件
|
5月前
jQuery+Slick插件实现游戏人物轮播展示切换源码
jQuery+Slick插件实现游戏人物轮播展示切换源码
71 14
|
6月前
|
JavaScript 前端开发
jQuery和CSS3滑动展开菜单按钮插件
这是一款jQuery和CSS3滑动展开菜单按钮插件。该滑动展开菜单按钮在用户点击主菜单按钮之后,子菜单以滑动的方式依次展开
103 21