为什么事件不从dojo小部件元素中激发

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');    
});   
});

这是这个问题的演示。

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

Answer 1

您没有。如果阅读参考指南，您会注意到dojo/on模块仅用于DOM事件。您的小部件也使用DOM节点，但不应该使用它们，因为它们是由小部件事件封装的。

要注册事件处理程序，您应该使用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节点被转换为小部件并被dijit/form/RadioButton使用的模板替换时，input字段将消失。获取单选按钮的DOM节点的最佳方法是使用dijitRadio类。

您的JSFiddle的另一个更新。

---

小提示：如果您对单选按钮(打开/关闭)的状态变化感兴趣，处理onChange事件可能是一个更好的主意。