将事件传递给 jQuery 插件

Question

我刚刚开始为 jQuery 编写插件。我找到了一个很好的教程，如何开始使用它，但我错过了一点。我想为每个元素注册一个独立的插件对象，并且我需要它们的事件。

这是我得到的代码：

(function($){
     var MyPlugin = function(pElement, pOptions)
     {
        var element = $(pElement);
        var object = pElement;
        var settings = $.extend({
           param: 'defaultValue'
        }, pOptions || {});

        this.onfocus = function() {
            element.val('Focus');
        };

        this.onblur = function() {
            element.val('Blur');
        }

        // DO I NEED THIS?
        object.onfocus = this.onfocus;
        object.onblur = this.onblur;
    };

    $.fn.myplugin = function(options)
    {
        return this.each(function()
        {
            var element = $(this);
            if (element.data('myplugin')) { return };
            var myplugin = new MyPlugin(this, options);
                element.data('myplugin', myplugin);

        });
    };
})(jQuery);

我需要将公共方法“onfocus”和“onblur”从“this”复制到“object”吗？有更好的办法吗？

Answer 1

编写 jQuery 插件的最佳指南可能是 jQuery 自己的。

jQuery 的事件系统 是插件处理事件的最佳方式。如果您使用 jQuery 1.7+（如果可能的话，我推荐使用它），.on() 和 .off() 是您的主力。您不仅可以绑定浏览器事件（例如 focus 和 blur），还可以创建完全自定义的事件（例如 'iamasuperstar'）并使用 this.trigger( 'iamasuperstar' 手动触发它们'）。

所以你应该为你的插件做这样的事情：

element.on( 'focus', function() {} )

element.on( 'blur', function() {} )

...以及您需要的任何其他内容。

Answer 2

为什么不：

    object.onfocus = function() {
        element.val('Focus');
    };

    object.onblur = function() {
        element.val('Blur');
    }