众所周知,在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. dijit样式定制(二)dijit.form.Select与dijit.form.NumberSpinner

    dijit.form.Select: Select的样式位于Claro/form/Select.less中,Select主要通过table来布局,下图可以看到Select的布局结构 介绍几个主要的cl ...

  3. 使用selenium webdriver+beautifulsoup+跳转frame,实现模拟点击网页下一页按钮,抓取网页数据

    记录一次快速实现的python爬虫,想要抓取中财网数据引擎的新三板板块下面所有股票的公司档案,网址为http://data.cfi.cn/data_ndkA0A1934A1935A1986A1995. ...

  4. BootStrap学习(2)_下拉菜单&按钮组

    一.下拉菜单 1.基本下拉菜单 如需使用下列菜单,只需要在class .dropdown 内加上下拉菜单即可.下面的实例演示了基本的下拉菜单: <!DOCTYPE html> <ht ...

  5. 去掉video视频播放器下的下载按钮

    去掉video视频播放器下的下载按钮: video::-internal-media-controls-download-button { display:none; } video::-webkit ...

  6. 【原创】smarty引擎下的导航按钮高亮实现

    <?php$_nvaarr = array( array('name'=>'首页','url'=>'company.php?id='), array('name'=>'公司介绍 ...

  7. 自定义 Swiper 的上一页,下一页按钮

    1. Swiper 的上一页,下一页按钮,不是必需包含在container 中的 2. 定义上一页,下一页按钮的样式,CSS略.... 3. 在初始化Swiper中,定义上一页,下一页按钮

  8. 背水一战 Windows 10 (31) - 控件(按钮类): ButtonBase, Button, HyperlinkButton, RepeatButton, ToggleButton, AppBarButton, AppBarToggleButton

    [源码下载] 背水一战 Windows 10 (31) - 控件(按钮类): ButtonBase, Button, HyperlinkButton, RepeatButton, ToggleButt ...

  9. 控件(按钮类): ButtonBase, Button, HyperlinkButton, RepeatButton, ToggleButton, AppBarButton, AppBarToggleButton

    介绍背水一战 Windows 10 之 控件(按钮类) ButtonBase Button HyperlinkButton RepeatButton ToggleButton AppBarButton ...

随机推荐

  1. sourceforge.net安装网站程序数据库相关

    sourceforge.net安装网站程序数据库相关 我们应该知道sourceforge.net是可以安装网站(当做一个虚拟空间使用的) 但是在安装cms程序的时候那时的数据库地址再填写“localh ...

  2. 03day->python基本数据类型

    基本数据类型 1.数字(int)     a = 5     a.bit_length()  # 查看数字实际用到的bit位 2.布尔值(bool)     用于条件判断 3.字符串(str)     ...

  3. 前端学习之jquery(二)

    操作元素(属性,css,文档处理) 1.1 属性操作 --------------------------属性 $("").attr(); $("").remo ...

  4. Azure CosmosDB (6) 冲突类型和解决策略

    <Windows Azure Platform 系列文章目录> 当我们为CosmosDB配置多个Azure Region写入,就需要考虑冲突类型和解决策略. 对于配置了多个写入区域的 Az ...

  5. function "round" declared implicitly

    keil工程代码,浮点计算中引用了数学库 math.h 中的round函数,但编译时出现告警 “warning:  #223-D: function "round" declare ...

  6. 从容器里dump java堆实验探索(原创)

    目标:从docker容器里dump java堆 模拟程序 占用空间500M, 设置启动JVM参数 docker启动命令 (PS:经过测试,至少要650M才能启动容器) 方式1: 通过docker ex ...

  7. About Gnu Linker1

    1 OverView ld combines a number of object and archive files, relocates their data and ties up symbol ...

  8. [译] iOS 11.4.1 Beta:全新的USB限制模式

    (Source/原文链接 https://blog.elcomsoft.com/2018/06/ios-11-4-1-beta-usb-restricted-mode-has-arrived/) 作者 ...

  9. python函数与模块(装饰器,文件处理,迭代器等)

    os模块 os.system('命令') 利用python调用系统命令,命令可以是以列表或者元组内的元素形式* res import os res=os.system('ipconfig') prin ...

  10. aptitude与apt-get的区别和联系

    aptitude 与 apt-get 一样,是 Debian 及其衍生系统中功能极其强大的包管理工具.与 apt-get 不同的是,aptitude 在处理依赖问题上更佳一些.举例来说,aptitud ...