Jquery的on,off事件详解,如何利用命名空间来解绑特定的事件

    最近在学习写一个基于jquery的js插件时,因为需要用到键盘按键事件,所以就用了bind的方法去绑定元素事件。可用的时候发现,在绑定事件和解绑事件时bind的方法无法满足我的需求。

ps:(我的需求)键盘按键事件是绑定在body上的,但同一页面可能出现两个不同的元素响应同一个的按钮的事件,例如,有一组弹窗,分别为一级弹窗和二级弹窗,两个弹窗都有关闭按钮,都需要响应Esc键。当二级弹窗存在时,Esc只响应二级弹窗,且关闭二级弹窗,解除二级弹窗上Esc事件。如果不使用命名空间来解绑特定的事件,那么二级弹窗关闭时解除了body上的所有事件,那么一级弹窗就无法响应Esc键关闭弹窗了。有人会问为什么不把keydown事件绑定在弹窗的关闭按钮上,我会给你说,我试过,但没有成功,所以在这里就不讨论了,如果有大神能成功,那我就在这里受教了~

好了,说了那么多废话现在就来正是介绍on方法。

首先,我们先看一下on方法和bind方法的区别:

$(selector).bind(event,data,function)  

event:必需。规定添加到元素的一个或多个事件。由空格分隔多个事件值。必须是有效的事件。

data:可选。规定传递到函数的额外数据。

        function:必需。规定当事件发生时运行的函数。

-----------------------------------------------------------------------------------------------------------------------------------------------

        $(selector).on(event,childSelector,data,function)

event:必需。必需。规定添加到被选元素的一个或多个事件或命名空间。由空格分隔多个事件值。必须是有效的事件。

childSelector:可选。规定只能添加到指定的子元素上的事件处理程序(且不是选择器本身,比如已废弃的 delegate() 方法)。

data:可选。规定传递到函数的额外数据。

        function:必需。规定当事件发生时运行的函数。

由上述所述,我们可以看到,on的方法实际上和bind的方法差不多,但on方法在bind方法在基础上增加了绑定事件的命名空间和一个叫childSelector的参数。因为本文会侧重介绍怎么解绑特定的事件,所以childSelector不会在这里多说了。

那么我们该如何运用这个命名空间来解绑特定事件呢?下面我们来看一个简单的例子:


这里我们给body绑定了一个keydown事件,而且我们在keydown后面加上了一个命名空间“Enter”+this.symbol。其中this.symbol是一个变量。

而解绑的时候,同样的我们使用off的方法解绑的时候只需要加上“Enter”+this.symbol这个命名空间就可以解绑指定的事件了。


    这样做以后,你就能解绑指定事件了,而不是解除所有的事件了。


  • 2
    点赞
  • 0
    收藏
  • 打赏
    打赏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
©️2022 CSDN 皮肤主题:大白 设计师:CSDN官方博客 返回首页
评论

打赏作者

zpjshiwo77

你的鼓励将是我创作的最大动力

¥2 ¥4 ¥6 ¥10 ¥20
输入1-500的整数
余额支付 (余额:-- )
扫码支付
扫码支付:¥2
获取中
扫码支付

您的余额不足,请更换扫码支付或充值

打赏作者

实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、C币套餐、付费专栏及课程。

余额充值