众所周知，在dojo里存在dom和widget两个类型，dom指的是普通类型的HTML元素，包括各种类型的标签、按钮、输入框等等，而widget指的是dojo自身所带的模板，同时也包括按钮、输入框等等。那么在新建两个不同的按钮时，它们会不会存在什么差异呢？实验结果如下：
（1）先在html中新建两个不同类型的button按钮
<html>
<head>
<meta charset="UTF-8">
<title>parser</title>
<link rel="stylesheet" href="../../dojosrc/dijit/themes/claro/claro.css"/>
<script type="text/javascript" src="../../dojosrc/dojo/dojo.js" data-dojo-config="async: true"></script>
<script type="text/javascript" src="parser.js"></script>
</head>
<body>
<div id="oralButton">
<button id="button1" type="button" >OK</button>
</div>
<div id="widgetButton">
<button id="button2" data-dojo-type="dijit/form/Button" >You Are Master……</button>
</div>
</body>
</html>
（2）在JS文件中分别对按钮添加click时间，使其在点击后按钮内文字变化。在这里可以看出，两个类型button的click事件处理方法不一致，这是因为对于普通button来说，要先进行new Button()才可以进行dojo的后续操作，而dijit/form/Button则不需要，如果再进行new Button()的话会报“Tried to register widget with id==button2 but that id is already registered”的错误，因为其已经是被register声明了。
require(['dojo/dom',
'dojo/on',
'dojo/dom-attr',
'dijit/registry',
'dojo/parser',
'dijit/form/Button',
'dojo/domReady!']
,function(dom, on, domAttr, registry, parser, Button){
var node =dom.byId('button1');
// 获取button1的innerHTML值
var Value = domAttr.get(node, 'innerHTML');
console.log(Value);
// 将button1的value值赋给label，以供后续更换处理
var button = new Button({
label: Value
},'button1');
// 设置button1的变换值
var buttonClick = function(){
button.set('label', 'I Am hero!');
};
// button的点击事件，也可以用on(dom.byId('button'), 'click', function(){})
//button.on('click', buttonClick);
on(button, 'click', buttonClick );
// 剖析器解析data-dojo-type类型的widget组件
parser.parse();
var Node = registry.byId('button2');
// 获取button2 的label值
var button2Value = domAttr.get(Node, 'label');
console.log(button2Value);
// 将button2的value值赋给label。以供后续更换处理
var clickChange = function(){
domAttr.set(Node, 'label', 'No! I am a hreo!');
}
on(Node, 'click', clickChange);
})
浙公网安备 33010602011771号