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

Question

我遇到了 dojo 小部件不触发事件的困难。

我曾尝试使用 dojo.query 将事件绑定(bind)到某些元素，但它不会触发事件。 所以我尝试使用 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(处理多个单选按钮)，那么您可以使用byNode() 来实现。 dijit/registry 模块访问基于该 DOM 节点的小部件。例如:

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

但是你必须小心这一点。当 DOM 节点转换为小部件并替换为 dijit/form/RadioButton 使用的模板时，input 字段消失了。获取单选按钮的 DOM 节点的最佳方法是使用 dijitRadio 类。

您的 JSFiddle 的另一个更新.

---

小提示:如果您对单选按钮的状态更改(开/关)感兴趣，那么处理 onChange 事件可能是更好的主意.