1、在正式进入dojo事件之前,先看一下如何使用dojoConfig配置dojo的行为。
有两种方式配置,第一种方式使用dojoConfig:
第二种方式,使用data-dojo-config属性:
- <!-- 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>
两种方式是等价的。
- <script src="//ajax.googleapis.com/ajax/libs/dojo/1.9.1/dojo/dojo.js"
- data-dojo-config="has:{'dojo-firebug': true},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,"red");
- });
- on(myDiv,mouse.leave,"");
- });
- });
Note:默认情况下,dojo/on会以传入的节点(第一个参数)作为上下文环境执行事件处理方法。当需要进行事件委托时,上面的方法需要稍作改动,我们可以使用dojo/_base/lang.hitch来指定事件处理方法执行的上下文环境。
3、NodeList事件
Note:dojo/query返回的结果就是NodeList对象。NodeList是一个JavaScript数组,不过它提供了很多有用的方法来操作数组中的每一个元素。
- <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",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","onClick"));
- });
- </script>
4、事件发布/订阅
Note:通过dojo/on监听的事件或者通过topic.subscribe订阅的事件都有相应的方法取消。
- //event.js
- define(["dojo/on","dojo/topic","dojo/domReady"],topic){
- return {
- publish:function(id){
- var node = dom.byId(id);
- on(node,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>