关于jquery的事件命名空间


后端

零度逍遥

2014-07-28 20:39:16

在多人协作的前端开发中,或许会遇到一个问题:几个开发人员都给一个元素添加了同样的事件,但是又有开发人员想要解除掉元素身上的某个事件效果,这时候操作起来就有些麻烦,需要用到jquery给我们提供的事件命名空间。说的有点抽象,举个例子先:

比如有一个开发人员写到下面这样的代码:

$("#box").on('click',function () {
    $(this).css('background','#0f0');
})
还有一个开发人员写成这样:

$("#box").on('click',function () {
    $(this).css('color','#fff');
})
这时候如果第三个开发人员想要去除掉#box点击时文字变色的事件,他会考虑写下面的代码:

$("#box").off('click');
然而,这时你却发现,#box身上的click事件都被解绑了,这当然不是我们想要的,我们想要的是把文字变色的事件解绑,而背景变色的事件保留,这时,就要用上jquery给我们提供的事件命名空间。把上面的代码改写成如下:

$("#box").on('click.backgroud',function () {
	$(this).css('background','#0f0');
});

$("#box").on('click.color',function () {
	$(this).css('color','#fff');
});

$("#box").off('click.color');
这样就可以实现上述的请求,而这里添加的background和click就是事件的命名空间,好玩吧,有趣的jquery等着你去探索!