Question

我难以使用dojo小部件来触发事件。

我尝试使用dojo.query将事件绑定到某些元素，但它不会触发事件。所以我尝试了dijit.registry。但它也不会在点击元素时触发事件。

HTML

<div class="buttons">
     <input id="radio1" type="radio" data-dojo-type="dijit/form/RadioButton" name="radiobtn" /> <label for="radio1">one</label>
     <input id="radio2" type="radio"  data-dojo-type="dijit/form/RadioButton" name="radiobtn" /> <label for="radio2">Two</label>
     <input id="radio3" type="radio" data-dojo-type="dijit/form/RadioButton" name="radiobtn" /> <label for="radio3">Three</label>
 </div>

的Javascript

require(["dojo/parser", "dojo/query", "dijit/registry", "dijit/form/RadioButton", "dojo/domReady!"], function(parser, query, registry) {
    parser.parse();

    on(query('.buttons input'), 'click', function() {
        alert('Clicked');           
     });   

    on(registry.byId('radio1'), 'click', function() {
        alert('Clicked Radio1');    
    });   
});

以下是此问题的Demo。

如何使用dojo.query触发dojo小部件元素的事件？

Answer 1

你没有。如果您阅读reference guide，您会注意到dojo/on模块仅用于DOM事件。您的窗口小部件也使用DOM节点，但不应使用它们，因为它们由widget events封装。

要注册事件处理程序，您应该使用on()函数，例如：

registry.byId("radio1").on("click", function() {
    console.log("Clicked");
});

我还更新了您的JSFiddle。

如果你真的想使用dojo/query（处理多个单选按钮），那么你可以使用dijit/registry模块的byNode()来访问基于该DOM的小部件节点。例如：

query(".dijitRadio").forEach(function(domNode) {
    registry.byNode(domNode).on("click", function() {
        console.log("Clicked");
    });
});

但是你必须注意这一点。当DOM节点转换为窗口小部件并由input使用的模板替换时，dijit/form/RadioButton字段消失。获取radiobutton的DOM节点的最佳方法是使用dijitRadio类。

JSFiddle的另一次更新。

小注释：如果您对单选按钮的状态更改感兴趣（开/关），则最好处理onChange事件。

为什么不从dojo小部件元素触发事件？

1 个答案: