有人可以向我解释 Dojo 的“dojo/on”模块中到底发生了什么吗？

Question

我开始摆弄 Dojo.js，遇到了一个我不明白的东西。

我正在尝试创建自己的小部件。该小部件将非常简单——它只会查询页面上的所有图像并让它们监听 'click' 事件。每次单击都会将小部件的 counter 属性增加 1。

这是我的看法：

define(
    [                   
        "dojo/_base/declare",
        "dojo/query",
        "dijit/_WidgetBase",
        "dijit/_TemplatedMixin",
        "dojo/text!myProject/folder/myWidgetTemplate.html",
    ],
    function(declare, query, _WidgetBase, _TemplatedMixin, template) {
        declare("MyWidget", [_WidgetBase, _TemplatedMixin], {

            templateString: template,
            counter: 0,

            onClick: function(evt) {
                this.counter++;
                console.log(this.counter);
            },

            postCreate: function() {
                query("img").on("click", this.onClick);
            }

        });
    }
);

小部件初始化，我确实可以点击图像，但控制台总是返回 undefined。 似乎我缺少关于 dojo/on 模块如何工作的一些核心方面。有人可以向我解释一下我的代码到底发生了什么吗？

Answer 1

在您的情况下，this 指向image，属性counter 是undefined。为此，您可以使用dojo/base/lang 模块

define(
    [                   
        "dojo/_base/declare",
        "dojo/_base/lang", //add this
        "dojo/query",
        "dijit/_WidgetBase",
        "dijit/_TemplatedMixin",
        "dojo/text!myProject/folder/myWidgetTemplate.html",
    ],
    function(declare, lang, query, _WidgetBase, _TemplatedMixin, template) {
        declare("MyWidget", [_WidgetBase, _TemplatedMixin], {

            templateString: template,
            counter: 0,

            onClick: function(evt) {
                this.counter++;
                console.log(this.counter);
            },

            postCreate: function() {
                //lang.hitch will return a new function with scope changed
                query("img").on("click", lang.hitch(this, this.onClick));
            }

        });
    }
);

lang.hitch 将返回一个改变范围的新函数，因此当您使用 this 时，它将指向您传递的目标

您可以通过在 html 中声明事件来避免使用lang，例如

<img src="myImage.jpg" data-dojo-attach-event="onClick: onClick"/>  

其中onClick: onClick 可以读作event: functionName，并且functionName 必须存在于您的小部件中。

注意，您可以使用 JavaScript 的原生 bind function 执行相同操作，只需执行

query("img").on("click", this.onClick.bind(this));

你可以查看这个答案access this on external callback 它不是关于dojo，而是关于一般的Javascript。