众所周知，在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);
})
												


											
dojo下的dom按钮与dijit/form/Button的更多相关文章
	

    
								
  1. dijit.form.Select 基本用法
		
    dijit.form.Select 1)创建: var division = new dijit.form.Select({ id: "Division",//id必须唯一 nam ...
    
		
    2. 
						
  2. dijit样式定制(二)dijit.form.Select与dijit.form.NumberSpinner
		
    dijit.form.Select: Select的样式位于Claro/form/Select.less中,Select主要通过table来布局,下图可以看到Select的布局结构 介绍几个主要的cl ...
    
		
    3. 
						
  3. 使用selenium webdriver+beautifulsoup+跳转frame，实现模拟点击网页下一页按钮，抓取网页数据
		
    记录一次快速实现的python爬虫,想要抓取中财网数据引擎的新三板板块下面所有股票的公司档案,网址为http://data.cfi.cn/data_ndkA0A1934A1935A1986A1995. ...
    
		
    4. 
						
  4. BootStrap学习(2)_下拉菜单&按钮组
		
    一.下拉菜单 1.基本下拉菜单 如需使用下列菜单,只需要在class .dropdown 内加上下拉菜单即可.下面的实例演示了基本的下拉菜单: <!DOCTYPE html> <ht ...
    
		
    5. 
						
  5. 去掉video视频播放器下的下载按钮
		
    去掉video视频播放器下的下载按钮: video::-internal-media-controls-download-button { display:none; } video::-webkit ...
    
		
    6. 
						
  6. 【原创】smarty引擎下的导航按钮高亮实现
		
    <?php$_nvaarr = array( array('name'=>'首页','url'=>'company.php?id='), array('name'=>'公司介绍 ...
    
		
    7. 
						
  7. 自定义 Swiper 的上一页，下一页按钮
		
    1. Swiper 的上一页,下一页按钮,不是必需包含在container 中的 2. 定义上一页,下一页按钮的样式,CSS略.... 3. 在初始化Swiper中,定义上一页,下一页按钮
    
		
    8. 
						
  8. 背水一战 Windows 10 (31) - 控件（按钮类）: ButtonBase, Button, HyperlinkButton, RepeatButton, ToggleButton, AppBarButton, AppBarToggleButton
		
    [源码下载] 背水一战 Windows 10 (31) - 控件(按钮类): ButtonBase, Button, HyperlinkButton, RepeatButton, ToggleButt ...
    
		
    9. 
						
  9. 控件（按钮类）: ButtonBase, Button, HyperlinkButton, RepeatButton, ToggleButton, AppBarButton, AppBarToggleButton
		
    介绍背水一战 Windows 10 之 控件(按钮类) ButtonBase Button HyperlinkButton RepeatButton ToggleButton AppBarButton ...
    
		
    10. 
		

	


随机推荐
	

    
									
  1. Java 关键字详解（持续更新中）
			
    abstract:     表明类或者成员方法具有抽象熟悉.       修饰类,抽象类:         抽象类不能被实例化:         抽象类中可以有属性.方法.构造,都是用来给子类继承的: ...
    
			
    2. 
						
  2. Incjector
			
    网上的注入工具很多,大多也有比较详细的解释,但是大部分windows下的注入软件都是对自己软件的一种推荐,而且很多也不是非常的安全,对于有些破解版本来说,很可能自身会被带有木马,所以,Linux下的注 ...
    
			
    3. 
						
  3. cifX使用心得
			
    一.注意事项: 1.xChannelIORead()第一次读取到数据是空的.2.系统安装cifX驱动之前一定先安装有uio模块和libpciaccess库:建议系统内核为3.X.X版本,测试版本为3. ...
    
			
    4. 
						
  4. gtest 参数化
			
    前言: 在测试用例中,我们时常需要传给被测函数不同的值,gtest为我们提供了简便的方法,可以使我们能够灵活的进行参数化测试. 步骤: 1.创建一个类,继承testing::TestWithParam ...
    
			
    5. 
						
  5. LeetCode - Robot Room Cleaner
			
    Given a robot cleaner in a room modeled as a grid. Each cell in the grid can be empty or blocked. Th ...
    
			
    6. 
						
  6. Python爬取今日头条段子
			
    刚入门Python爬虫,试了下爬取今日头条官网中的段子,网址为https://www.toutiao.com/ch/essay_joke/源码比较简陋,如下: import requests impo ...
    
			
    7. 
						
  7. LG3211 [HNOI2011]XOR和路径
			
    题意 题目描述 给定一个无向连通图,其节点编号为 1 到 N,其边的权值为非负整数.试求出一条从 1 号节点到 N 号节点的路径,使得该路径上经过的边的权值的"XOR 和"最大.该 ...
    
			
    8. 
						
  8. 获取【请求体】数据的3种方式（精）（文末代码） request.getInputStream()   request.getInputStream()  request.getReader()
			
    application/x- www-form-urlencoded是Post请求默认的请求体内容类型,也是form表单默认的类型.Servlet API规范中对该类型的请求内容提供了request. ...
    
			
    9. 
						
  9. Dubbo-Admin 2.6.0使用
			
    一.下载源码 下载2.6.0的源码 https://github.com/apache/incubator-dubbo/releases/tag/dubbo-2.6.0 二.使用Eclipse打开du ...
    
			
    10. 
						
  10. 【mysql】字段类型和长度的解释
			
    int(11)最大长度是多少,MySQL中varchar最大长度是多少? int(11)最大长度是多少? 在SQL语句中int代表你要创建字段的类型,int代表整型,11代表字段的长度. 这个11代表 ...
    
			
    11.