dojo(二):事件处理
来源:互联网 发布:极简装修 知乎 编辑:程序博客网 时间:2024/04/30 08:14
1、在正式进入dojo事件之前,先看一下如何使用dojoConfig配置dojo的行为。
有两种方式配置,第一种方式使用dojoConfig:
<!-- set Dojo configuration, load Dojo --><script> dojoConfig= { has: { "dojo-firebug": true }, parseOnLoad: false, foo: "bar", async: true };</script><script src="//ajax.googleapis.com/ajax/libs/dojo/1.9.1/dojo/dojo.js"></script>第二种方式,使用data-dojo-config属性:
<script src="//ajax.googleapis.com/ajax/libs/dojo/1.9.1/dojo/dojo.js" data-dojo-config="has:{'dojo-firebug': true}, parseOnLoad: false, foo: 'bar', async: 1"></script>两种方式是等价的。
2、DOM事件
Dojo改进了Dom事件处理,通过处理浏览器差异,防止内存泄露等。dojo通过调用dojo/on处理DOM事件。
require(["dojo/on", "dojo/dom", "dojo/dom-style", "dojo/mouse", "dojo/domReady!"], function(on, dom, domStyle, mouse) { var myButton = dom.byId("myButton"), myDiv = dom.byId("myDiv"); on(myButton, "click", function(evt){ domStyle.set(myDiv, "backgroundColor", "blue"); }); on(myDiv, mouse.enter, function(evt){ domStyle.set(myDiv, "backgroundColor", "red"); }); on(myDiv, mouse.leave, function(evt){ domStyle.set(myDiv, "backgroundColor", ""); });});
Note:默认情况下,dojo/on会以传入的节点(第一个参数)作为上下文环境执行事件处理方法。当需要进行事件委托时,上面的方法需要稍作改动,我们可以使用dojo/_base/lang.hitch来指定事件处理方法执行的上下文环境。
require(["dojo/on","dojo/dom","dojo/_base/lang","dojo/domReady!"], function(on, dom, lang) { varmyScopedButton1 = dom.byId("myScopedButton1"), myScopedButton2 = dom.byId("myScopedButton2"), myObject = { id:"myObject", onClick:function(evt){ alert("The scope of this handler is " + this.id); } }; // This will alert "myScopedButton1" on(myScopedButton1,"click", myObject.onClick); // This will alert "myObject" rather than "myScopedButton2" on(myScopedButton2,"click", lang.hitch(myObject, "onClick")); });
3、NodeList事件
<button id="button1" class="clickMe">Click me</button><button id="button2" class="clickMeAlso">Click me also</button><button id="button3" class="clickMe">Click me too</button><button id="button4" class="clickMeAlso">Please click me</button><script>require(["dojo/query", "dojo/_base/lang", "dojo/domReady!"], function(query, lang) { var myObject = { id: "myObject", onClick: function(evt){ alert("The scope of this handler is " + this.id); } }; query(".clickMe").on("click", myObject.onClick); query(".clickMeAlso").on("click", lang.hitch(myObject, "onClick")); });</script>Note:dojo/query返回的结果就是NodeList对象。NodeList是一个JavaScript数组,不过它提供了很多有用的方法来操作数组中的每一个元素。
4、事件发布/订阅
//event.jsdefine(["dojo/on","dojo/dom","dojo/topic","dojo/domReady"],function(on,dom,topic){return {publish:function(id){var node = dom.byId(id);on(node,"click",function(){topic.publish("alertuser","i am alerting you");});}};});//index.html<button id="alertButton">Alert the user</button> <button id="createAlert">Create another alert button</button> <script src="dojo-release-1.9.1/dojo/dojo.js" data-dojo-config="async:true"></script> <script> require(["custom/event","dojo/topic"],function(event,topic){ event.publish("alertButton"); topic.subscribe("alertuser",function(text){ alert(text); }); }); </script>Note:通过dojo/on监听的事件或者通过topic.subscribe订阅的事件都有相应的方法取消。
- dojo(二):事件处理
- dojo dojo中的事件处理
- dojo中的事件处理
- dojo中的事件处理
- Dojo入门:dojo中的事件处理
- Dojo入门:dojo中的事件处理
- 使用 Dojo 处理 DOM 事件
- dojo事件机制详解(二)
- web前端之dojo实际应用及开发二:事件处理(附有源码)
- 使用 Dojo 处理用户自定义事件
- js监听 冒泡机制 dojo事件处理
- Dojo 事件机制:浏览器事件统一处理方法介绍
- 事件处理(二)
- dojo小例子(15)给dojo on的事件处理函数传递自定义参数的两种方法
- dojo的事件机制
- dojo 事件 显示信息
- dojo事件绑定
- Dojo 事件<10>
- 嵌入式和驱动开发面试笔试题搜集整理
- 单链表的若干问题
- 创建使用dll
- 实验五 单表查询(V2.0版)
- HDU 1423 最大公共递增子序列长度
- dojo(二):事件处理
- 程序员的谎谬之言还是至理名言?
- hdu 4404 Worms
- Java基础——动态绑定
- Scala Trait 的线性化
- C用语言中的数组与指针
- 送给程序员:最好的编程名言
- WINCE6 添加唯一的设备ID 用户不可修改
- 黑马程序员_IO流_3