jQuery 插件自定义事件触发器未触发

Question

自从我完成 jQuery 插件以来已经有一段时间了，我正在处理一个带有选项和内部事件的非常常见的样板。在其中一种内部方法中，我需要触发一个自定义事件，以便其他页面可以捕获该事件并使用它。更具体地说，在这种用法中，在 canvas 元素上绘制结束时，我希望能够捕获插件外部的事件，以便获取 canvas 内容以发送到与插件无关的其他地方本身。

但是，trigger 调用似乎没有触发或从其他页面查找绑定事件。 None 的控制台消息显示在 Firebug。

这是我的示例插件（已简化）：

; (function ($, window, document, undefined) {
    "use strict";

    var $canvas,
        context,
        defaults = {
            capStyle: "round",
            lineJoin: "round",
            lineWidth: 5,
            strokeStyle: "black"
        },
        imgElement,
        options,
        pluginName = "myPlugin";

    function MyPlugin(element, opts) {
        this.imgElement = element;
        this.options = $.extend({}, defaults, opts);
        this._defaults = defaults;
        this._name = pluginName;
        this.init();
    }

    $.extend(MyPlugin.prototype, {
        init: function () {
            var $imgElement = $(this.imgElement);
            $canvas = $(document.createElement("canvas")).addClass("myPluginInstances");

            $imgElement.after($canvas);

            context = $canvas[0].getContext("2d");

            $canvas.on("mousedown touchstart", inputStart);
            $canvas.on("mousemove touchmove", inputMove);
            $canvas.on("mouseup touchend", inputEnd);
        }
    });

    $.fn.myPlugin = function (opts) {
        return this.each(function () {
            if (!$.data(this, "plugin_" + pluginName)) {
                $.data(this, "plugin_" + pluginName, new MyPlugin(this, opts));
            }
        });
    };

    function inputStart(event) {
        //...processing code
    }

    function inputMove(event) {
         //...processing code
    }

    function inputEnd(event) {
        //...processing code

        // Trigger custom event
        $(this.imgElement).trigger("mydrawevent", [this.toDataURL()]);
    }
}(jQuery, window, document));

然后从 document.ready 中的单独页面绑定事件：

$(".myPluginInstances").myPlugin().on("mydrawevent", function (e, data) {
    console.log("mydrawevent");
    console.log(data);
});

来自 Firebug 我看到 imgElement 确实绑定了侦听器：

mydrawevent
    -> function(a)
        -> function(e, data)

我已经尝试了很多事情，例如在不同的 DOM 元素上调用 trigger，将事件参数数据传入和传出数组，定义回调方法（有它自己的问题），等等。我觉得这个问题很愚蠢，就在我面前，但我可以用更多的眼睛来仔细检查我的理智。

Answer 1

作为对我上面对 Vikk 的回应的进一步解释，问题确实是范围界定和理解哪些对象绑定到插件的哪些部分。在我的例子中，作为私有事件处理程序的内部方法绑定到我的 canvas 元素，但插件本身是在 img 元素上实例化的，这至少是这个特定实现的临时要求。

基于此，从内部事件处理程序中使用 $(this) 意味着它试图在我的 canvas 元素上使用 trigger 而不是 img从插件外部附加了 mydrawevent 侦听器的元素。

jQuery 插件自定义事件触发器未触发

jQuery plugin custom event trigger not firing

javascript

jquery

events

jquery-plugins

dom-events