Javascript 表格更改事件

我试图让一个按钮根据表单是否有效将CSS类从“活动”更改为“非活动”

所以我有一个声明性的部分

<form data-dojo-type="dijit/form/Form" id="myForm" action="http://somthing">
<script type="dojo/on" data-dojo-event="change" data-dojo-args="e">
// for some reason change returns dom object not dijit object....
var self = dijit.byId( this.id);
require( [ 'dojo/dom-class' ], function (domClass) {
    var tmp, on = 'active' , off = 'inactive';
    if (self.get('state')) {
        // invalid
        tmp = off; off=on; on=tmp;
    }
domClass.replace( 'complete', on, off);
});
</script>
..rest of form and submit button with id='complete' is here.

//由于某些原因，更改返回的是dom对象而不是dijit对象。。。。
var self=dijit.byId（this.id）；
require（['dojo/dom class']，函数（domClass）{
变量tmp，开=‘活动’，关=‘非活动’；
if（self.get（'state'））{
//无效的
tmp=off；off=on；on=tmp；
}
domClass.replace（‘完成’、打开、关闭）；
});
…id为='complete'的表单和提交按钮的其余部分在此处。

---

此脚本用于根据表单是否有效更改submit按钮的类。我的第一个问题是，为什么这个例程将DOM对象作为

this

而不是Dijit对象，因为示例似乎暗示我应该得到后者。我的第二个问题是，我是否应该以更好的方式执行此操作？

检查您收到的事件的

target

属性：您很可能是从表单接收到它，从表单中的实际控件冒泡（通过HTML事件冒泡）。它是一个本机DOM事件，而不是更高级别的Dojo事件，因此

this

是DOM节点

有时使用一段简单的JavaScript代码而不是

dojo/on

脚本更容易，并且使用

dojo/on

手动订阅。没有魔法，你可以准确地看到你订阅的内容：

require(['dojo/on'], function (on) {
  var myForm = dijit.byId("myForm");
  on(form, "change", function(evt) {
    // Handle the event here, referring to myForm rather than trying to
    // work with 'this'.
  });
});

---

更多的例子，包括检查有效性，请访问：

是的，我得到的印象是，有时我会尝试吞下整个Dojo哲学的钩线和伸卡球，而可能有更简单的方法。从示例中，我希望得到更高级别的事件。例如，您提供的页面捕获了一个

submit

事件rhrough

dojo/on

，并且似乎期望

this

是dojo对象，而不是DOM对象，调用

this.validate（）

我的团队和我从不使用dojo/on标记支持，并且努力保持HTML和JS完全分离。这给了我们Dojo真正的胜利：将表示与逻辑分离，组件化和重用。它使用

dojo/method

脚本（实际上是对

dojo/aspect

的调用）连接到

onSubmit

，它位于dojo

Form

小部件上，而不是HTML

Form

DOM节点上。在Dojo小部件对象和DOM节点之间保持良好的分离，这样您就可以排序了。（当然，内部破裂、哭泣，但已排序…）不，请看“验证”示例，而不是“使用本机表单元素”示例，第一个示例使用的是

dojo/on

，与我描述的方式完全相同。我同意你将演示文稿与逻辑评论分开的观点——这是一种修复别人的脏衣服的黑客行为，虽然我个人会将其放入页面控制器文件中，或者扩展一个Dijit类来做类似的事情，但这一次这些选项并没有真正出现。