jQuery绑定事件一种奇怪的写法不明白

王子林
  • 343

在看别人的一个datepicker插件的源码的时候,看到它里面绑定事件大量的这种代码

_bindEvents : function () {
            this.$el.on(this.opts.showEvent + '.adp', this._onShowEvent.bind(this));
            this.$el.on('mouseup.adp', this._onMouseUpEl.bind(this));
            this.$el.on('blur.adp', this._onBlur.bind(this));
            this.$el.on('keyup.adp', this._onKeyUpGeneral.bind(this));
            $(window).on('resize.adp', this._onResize.bind(this));
            $('body').on('mouseup.adp', this._onMouseUpBody.bind(this));
        },

第一次见过这种事件后面加上adp的写法,甚是不解。有了解的同学可以帮忙解释一下么。

代码来源:
https://github.com/t1m0n/air-...

回复
阅读 2k
3 个回答

所谓的 adp 应该是 自定义的事件

问题已经找到答案了。event.adp后面的adp是event的命名空间。adp是个自己随意取得名字。你也可以给它取名叫amao,agou。添加了这个标识意味着这个事件存放在adp这个命名空间下。如果你之后要触发、移除、绑定特定的事件,你就可以借助这个小东西了。Whatever,这个玩意儿就是干了个区分的事情。get到这一点,你应该明白了这个东西。

为啥要这么做呢?

此为情景一:写jQuery的插件时,需要给element绑定插件自己的事件,但是有时候插件需要销毁自身(经常见到的destroy),这个时候需要解绑事件。但是element自身也可能绑定了事件,如果贸然用off解绑,必然会解绑全部的事件。于是我们可以通过off('click',handle)来解绑我们的事件和处理函数(handle),但是我们绑定事件时经常用的是匿名函数,匿名函数就不能用off(event, handle)的方式了。因此jQuery发明了event namespace 这个玩意儿,解绑的时候,就可以直接解绑这个命名空间的函数了(而不会解绑element自己的事件)。

来个解绑的例子:

destroy: function () {
            var _this = this;
            _this.$el
                .off('.adp')
                .data('datepicker', '');

            _this.selectedDates = [];
            _this.focused = '';
            _this.views = {};
            _this.keys = [];
            _this.minRange = '';
            _this.maxRange = '';

            if (_this.opts.inline || !_this.elIsInput) {
                _this.$datepicker.closest('.datepicker-inline').remove();
            } else {
                _this.$datepicker.remove();
            }
        },

看见没,这样解绑事件就很方便啦!

同样,在触发事件的时候,我们也可以只触发特定的事件。

你知道吗?

宣传栏