由于解析器，Dojo 事件无法正常工作答案

【问题标题】：Dojo event is not working due to parser由于解析器，Dojo 事件无法正常工作
【发布时间】：2013-12-31 20:18:29
【问题描述】：

我的代码sn-p

<div id="mainMenu" data-dojo-type="dijit/MenuBar">
            <div id="edit" data-dojo-type="dijit/MenuBarItem">Add Hero</div>
            <div id="view" data-dojo-type="dijit/MenuBarItem">Grid View</div>
            <div id="task" data-dojo-type="dijit/MenuBarItem">Detailed View</div>
        </div>
    <script >
        var dojoConfig = {
            async: 1,
            parseOnLoad: 0
        };      
    </script>
    <script>
    require([
                   "dojo/dom",
                    "dojo",
                    "dojo/parser",
                    "dojo/query",
                    "dojo/on",
                    "dijit/Menu",
                    "dojo/domReady!"
                ], function(dom,dojo ,parser, query,on){

                    //var result = query("#edit");
                    var myButton=dojo.byId("edit");console.log(myButton);
                    on(myButton, "click", function(){
                        alert("Cliked on menu item");
                    });

                });
    </script>

我的目标是在点击时显示菜单名称。但是这样做的问题是解析器事件不会被触发。如果我将parseOnLoad 更改为0 或flase，我会收到警报消息，但菜单会受到干扰，如果我将parseOnLoad 设置为1，那么单击事件不起作用？

【问题讨论】：

你也可以发布你的编辑按钮的 HTML 代码吗？现在我认为您正在使用 DOM 事件，而您实际上是在尝试使用小部件事件。
这是我的 HTML 代码

添加英雄

网格视图

详细查看

标签： javascript dojo

【解决方案1】：

虽然您的代码可能适用于 DOM 节点，但它不适用于小部件 (dijit)。这也是禁用 parseOnLoad 功能时它起作用的原因，因为您从未将 DOM 节点解析为小部件。这意味着您的 DOM 事件将起作用，但是当然，菜单永远不会被创建为小部件，因此您的菜单会出现问题。

现在，要解决这个问题，您需要使用dijit/registry 来检索菜单项：

var myButton = registry.byId("edit");

dojo/on 模块仅用于 DOM 事件，因此您也必须替换它。幸运的是，widget 对象（即您使用注册表检索的内容）已经有一个on() 函数（请参阅API docs），我们可以像这样使用它：

myButton.on("click", function() {
    alert("Cliked on menu item");
});

我们需要更改的最后一件事是初始 DOM 加载事件 (dojo/domReady!)。 在加载 DOM 之后解析小部件。这意味着如果我们侦听 DOM-ready 事件，我们将无法检索小部件。用于检查 DOM 是否已加载和小部件是否已解析的事件处理程序是使用 dojo/ready 模块。它的语法与dojo/domReady! 插件略有不同，因为我们是这样使用它的：

ready(function() {
    // Your code
});

或者在你的情况下：

ready(function() {
    var myButton = registry.byId("edit");
    console.log(myButton);

    myButton.on("click", function() {
        alert("Clicked on menu item"); 
    });
});

完整的例子也可以在JSFiddle找到。

【讨论】：