Dojo入门:dojo中的事件处理
JS为DOM添加事件
在原生的环境下,为DOM添加事件处理函数有多种方法:
<input type="button" name="btn" value="点击…" id="btn" onclick="btnClick" />
或者使用以下方法:
<input type="button" name="btn" value="点击…" id="btn" />
<script type="text/javascript">
function btnClick() {
alert("我被点击了");
}
document.getElementById("btn").onclick = btnClick;</script>
以上这两种方法存在明显的弊端:每一个事件只能指定一个事件处理函数,另外,如果要移除一个事件处理函数,似乎只能使用:
document.getElementById("btn").onclick = null;
或者
document.getElementById("btn").onclick = "";
这种方式极不利于模块化编程。W3C DOM Level2 标准有了新的事件模型,新的事件模型允许为事件添加多个处理方法,并加入了事件冒泡机制。
使用新的事件模型来添加事件处理方法:
<input type="button" name="btn" value="点击…" id="btn" />
<script type="text/javascript">
function btnClick() {
alert("我被点击了");
}
document.getElementById("btn").addEventListener("click", btnClick);
</script>
移除一个事件处理方法:
document.getElementById("btn").removeEventListener("click", btnClick);
dojo事件处理
dojo使用connect方法为DOM添加事件处理函数。
<script type="text/javascript">
function btnClick() {
alert("我被点击了");
}
var btn = dojo.byId("btn");
dojo.connect(btn, "onclick", btnClick);
</script>
dojo.connect方法的官方解释:dojo.connect is the core event handling and delegation method in Dojo. It allows one function to "listen in" on the execution of any other, triggering the second whenever the first is called. Many listeners may be attached to a function, and source functions may be either regular function calls or DOM events.
翻译过来大概是:dojo.connect 是dojo中事件处理和委托方法的核心。它允许一个方法去“监听”另一个方法的执行,当被监听方法被调用的时候触发监听方法。一个方法可以附加很多监听者,这个源方法可以是常规的方法或DOM事件。
这么说来,connect还可以监听别的方法的执行,下面我们来做一个测试:
<input type="button" name="btn" value="点击…" id="btn" />
<script type="text/javascript">
function sayHello() {
alert("Hello ");
} function sayWorld() {
alert("world~");
} dojo.addOnLoad(function () {
var btn = dojo.byId("btn");
btn.addEventListener("click", sayHello);
dojo.connect("sayHello", sayWorld);
});
</script>
这段代码的执行效果是当按钮被点击之后,先弹出一个Hello字符串,当把对话框关掉以后,会弹出另外一个world对话框。
可能不是每个人都喜欢这种处理方式,但这样以来,代码会更易于阅读。
如果需要移除一个事件,则需要调用dojo.disconnect方法,这个方法需要一个dojo.connect方法的返回值作为参数:
var handle = dojo.connect(btn, "onclick", btnClick);
dojo.disconnect(handle);
订阅和发布
这是dojo很值得关注的一个功能,它使得各个dojo组件可以方便的交互。这个功能使用起来很方便:
<input type="text" name="txtMessage" value="" id="txtMessage" />
<input type="button" name="btn" value="发布…" id="btnPublish" />
<script type="text/javascript">
dojo.addOnLoad(function () {
//订阅MesagePublish主题
dojo.subscribe("MessagePublish", function (msg) {
alert(msg);
}); var btnPublish = dojo.byId("btnPublish");
dojo.connect(btnPublish, "onclick", function () {
dojo.publish("MessagePublish", dojo.byId("txtMessage").value);
});
});
</script>
以上代码的运行效果如图:
如要取消一个订阅,需要使用dojo.unsubscribe方法,这个方法需要一个由dojo.subscribe返回的句柄,其处理方式和dojo.connect、dojo.disconnect 的方式一样。
如果认为此文对您有帮助,别忘了支持一下哦!
Dojo入门:dojo中的事件处理的更多相关文章
- Dojo入门:初识Dojo
Dojo的全称是Dojo Toolkit,始创于2004年,是当前各种蓬勃发展的JS工具包中的佼佼者.Dojo 为富互联网应用程序(RIA) 的开发提供了完整的端到端的解决方案,包括核心的 Jav ...
- 手把手教你Dojo入门
如果仅仅是为了练习Dojo,或者进行测试,可以参考下面的步骤.下面的文件均是在Windows下测试 需要的工具 1 Tomcat服务器:下载地址 选择适合自己的机器型号,即可 2 Dojo的工具包:下 ...
- dojo入门
1.引入dojo.js dojo的发行包里有4个子目录,要引入的文件是名叫"dojo"的子目录里的dojo.js. 假设你是这样的目录结构: project | +--dojo-l ...
- Dojo入门:DOM操作
作为一款功能齐全的js工具包,dojo提供了统一的DOM操作方法. dojo.byId dojo.byId 函数使您可以通过 id 属性选择一个 DOM 节点.该函数是标准 document.ge ...
- 第38课 Qt中的事件处理(上)
1. GUI程序原理回顾 (1)图形界面应用程序的消息处理模型 (2)思考:操作系统发送的消息如何转变为Qt信号 2. Qt中的事件处理 (1)Qt平台将系统产生的消息转换为Qt事件 ①Qt事件是一个 ...
- [转]理解JavaScript中的事件处理
什么是事件? 事件(Event)是JavaScript应用跳动的心脏 ,也是把所有东西粘在一起的胶水.当我们与浏览器中 Web 页面进行某些类型的交互时,事件就发生了.事件可能是用户在某些内容上的点击 ...
- 理解JavaScript中的事件处理
什么是事件? 事件(Event)是JavaScript应用跳动的心脏 ,也是把所有东西粘在一起的胶水.当我们与浏览器中 Web 页面进行某些类型的交互时,事件就发生了.事件可能是用户在某些内容上的点击 ...
- dojo/dom dojo/domConstruct dojo/query
dom.byId require(["dojo/dom", "dojo/domReady!"], function(dom) { var one = dom.b ...
- js中关于事件处理函数名后面是否带括号的问题
今天总结一个关于事件处理程序的小细节.首先回顾一下事件处理的一些概念. JS中的事件处理(事件绑定)就是让某种或某些事件触发某些活动.有两种常见的形式,分别是DOM Level 0 和DOM Leve ...
- 理解JavaScript中的事件处理 阻止冒泡event.stopPropagation();
原文地址:http://www.cnblogs.com/binyong/articles/1750263.html 这篇文章对于了解Javascript的事件处理机制非常好,将它全文转载于此,以备不时 ...
随机推荐
- 构建的Web应用界面不够好看?快试试最新的Kendo UI R3 2019
通过70多个可自定义的UI组件,Kendo UI可以创建数据丰富的桌面.平板和移动Web应用程序.通过响应式的布局.强大的数据绑定.跨浏览器兼容性和即时使用的主题,Kendo UI将开发时间加快了50 ...
- Java分级考试
石家庄铁道大学选课管理系统 1.项目需求: 本项目所开发的学生选课系统完成学校对学生的选课信息的统计与管理,减少数据漏掉的情况,同时也节约人力.物力和财力.告别以往的人工统计. 2.系统要求与功能设计 ...
- robotframework 找出重复元素
思路 一.把需要进行比较的元素取出来组装成一个list 二.利用python函数,从list中找出重复函数 python函数: from collections import Counter #引入C ...
- i3wm
1.音量调节(alsa-utils) alsamixer: alsamixer is a graphical mixer program for the Advanced Linux Sound Ar ...
- 21.django中间件源码阅读
回顾: 关于里面的源码流程大家可以全看视频,因为代码的跳动性很大,而且会多次调用通过一方法,所以关于中间源码的部分去找个视频看一看,我写的不是很清楚. # 1 cookie session # 2 f ...
- 基于nc命令监控服务端口的Shell脚本
Shell代码: #!/bin/bash export LANG=en_US.UTF- #IP Address=127.0.0.1 #Port Port= #尝试的次数 n= #nc timeout, ...
- QT:圆角设置
Qt在设置窗口边框圆角时有两种方式,一种是设置样式,另一种是在paintEvent事件中绘制窗口.下面分别叙述用这两种方式来实现窗口边框圆角的效果. 一.使用setStyleSheet方法 this- ...
- IE浏览器如何实现断点续传
需求: 支持大文件批量上传(20G)和下载,同时需要保证上传期间用户电脑不出现卡死等体验: 内网百兆网络上传速度为12MB/S 服务器内存占用低 支持文件夹上传,文件夹中的文件数量达到1万个以上,且包 ...
- 货郎担问题(TSP问题)
货郎担问题也叫旅行商问题,即TSP问题(Traveling Salesman Problem),是数学领域中著名问题之一. 有n个城市,用1,2,…,n表示,城i,j之间的距离为dij,有一个货郎从城 ...
- 【学习】linux环境下nginx文件彻底删除
nginx卸载其实很简单,只需要两步即可完成!第一步:输入以下指令全局查找nginx相关的文件: sudo find / -name nginx* 第二步:删除查找出来的所有nginx相关文件 sud ...