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.js
define(["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订阅的事件都有相应的方法取消。