1、DOM事件
Dojo 的主要的DOM事件处理机制是dojo/on。Dojo为用户提供了统一的DOM事件机制,通过使用Dojo的dojo/on,用户可以避免各种DOM API的分歧,同时DOJO也预防了内存泄露问题。
页面on.html代码如下:
效果:当点击按钮时,div变成蓝色,单鼠标经过div时,div变成红色,当鼠标离开后,div变成白色。
<!DOCTYPE html> <html> <head lang="en"> <meta charset="UTF-8"> <title></title> <style> #myButton { margin-bottom:1em; } #myDiv { border: 1px solid black; background-color: white; width: 100px; height: 100px; } </style> <script src="dojo/dojo.js" data-dojo-config="async: true"></script> <script> 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", ""); }); }); </script> </head> <body> <button id="myButton">Click me!</button> <div id="myDiv" style="background-color: red; ">Hover over me!</div> </body> </html>
注意:dojo/mouse是必须的,并不是所有的浏览器都支持mouseenter和mouseleave事件, dojo/mouse添加了这样的支持。
on(element, event name, handler),这种模式适用于所有的window,document,node, form,mouse和keyboard事件。
on方法不仅可实现API注册事件,而且规范化了事件处理程序是如何工作的:
(1)事件处理器按照注册的顺序来调用。
(2)当事件处理器被调用时,第一个参数始终为一个事件对象。
(3)事件对象会有一个target属性,一个stopPropagation方法,和一个preventDefault方法。
如同DOM API一样,Dojo提供删除事件处理器的方法:handle.remove。on方法的返回值是一个拥有remove方法的简单对象,调用此方法将删除事件监听。例如你想要一个只执行一次的方法你可以按照下面做:
var handle = on(myButton, "click", function(evt){ // Remove this event using the handle handle.remove(); // Do other stuff here that you only want to happen one time alert("This alert will only happen one time."); });
dojo/on包含了一个便利的方法处理这些一次性的事件on.once,他接收和on一样的参数。
on方法第一参数是事件处理程序的上下文,一个例外是:当on 使用委派事件。你可以使用lang.hitch(在dojo/_base/lang模块中)指定运行处理器的上下文。
require(["dojo/on", "dojo/dom", "dojo/_base/lang", "dojo/domReady!"], function(on, dom, lang) { var myScopedButton1 = 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")); });
2、NodeList事件
dojo.NodeList提供了on方法用于向多个节点注册事件,NodeList.on方法与dojo/on方法类似,没有dojo/on方法中的第一个参数,因为在NodeList中你正在关联的节点是一个对象。dojo/query包含了NodeList.on方法,所以你不需要引用dojo/on。
<!DOCTYPE html> <html> <head lang="en"> <meta charset="UTF-8"> <title></title> <style> #myButton { margin-bottom: 1em; } #myDiv { border: 1px solid black; background-color: white; width: 100px; height: 100px; } </style> <script src="dojo/dojo.js" data-dojo-config="async: true"></script> <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> </head> <body> <button id="button1" class="clickMe">clickMe</button> <button id="button2" class="clickMeAlso">clickMeAlso</button> <button id="button3" class="clickMe">clickMe</button> <button id="button4" class="clickMeAlso">clickMeAlso</button> </body> </html>
备注:NodeList.connect方法返回一个dojo.NodeList对象以用于链式调用,而NodeList.on返回一个存放on事件处理器的一个数组,该数组包含一个remove方法。
3、事件委托
事件委托格式:on(parent element, "selector:event name", handler)
<!DOCTYPE html> <html> <head lang="en"> <meta charset="UTF-8"> <title></title> <style> #myButton { margin-bottom: 1em; } #myDiv { border: 1px solid black; background-color: white; width: 100px; height: 100px; } </style> <script src="dojo/dojo.js" data-dojo-config="async: true"></script> <script> require(["dojo/on", "dojo/dom", "dojo/query", "dojo/domReady!"], function(on, dom){ var myObject = { id: "myObject", onClick: function(evt){ alert("The scope of this handler is " + this.id); } }; var div = dom.byId("parentDiv"); on(div, ".clickMe:click", myObject.onClick); }); </script> </head> <body> <div id="parentDiv"> <button id="button1" class="clickMe">Click me</button> <button id="button2" class="clickMe">Click me also</button> <button id="button3" class="clickMe">Click me too</button> <button id="button4" class="clickMe">Please click me</button> </div> </body> </html>
注意:虽然我们不直接的使用dojo/query,但此模块仍然是需要的。这是因为dojo/on需要dojo/query暴露选择器引擎,以便能够匹配事件委托所使用的选择器。
4、Publish/Subscribe(发布/订阅)
在此之前,以上的所有例子都使用一个已存在的对象作为事件的发生器(你注册的等待事件的发生)。如果你没有一个节点的引用,或者并不知道对象是否已经创建。这就是dojo 的发布/订阅框架引入的原因。通过 dojo/topic模块,Pub/sub允许你为一个主题注册一个处理器,(主题是一个事件的别名,此事件是多源的,以字符串形式描述)当配发布的时候主题将被调用。我们设想一下,在我们开发的应用中,我们需要一些按钮,来弹出动作的用户,我们想要一次性的将弹出写完,我们也不想创建一个包装对象,同过按钮来注册此小程序,Pub/sub能够应用在此场景中。
<!DOCTYPE html> <html> <head lang="en"> <meta charset="UTF-8"> <title></title> <style> #myButton { margin-bottom: 1em; } #myDiv { border: 1px solid black; background-color: white; width: 100px; height: 100px; } </style> <script src="dojo/dojo.js" data-dojo-config="async: true"></script> <script> require(["dojo/on", "dojo/topic", "dojo/dom-construct", "dojo/dom", "dojo/domReady!"], function(on, topic, domConstruct, dom) { var alertButton = dom.byId("alertButton"), createAlert = dom.byId("createAlert"); on(alertButton, "click", function() { // When this button is clicked, // publish to the "alertUser" topic topic.publish("alertUser", "I am alerting you."); }); on(createAlert, "click", function(evt){ // Create another button var anotherButton = domConstruct.create("button", { innerHTML: "Another alert button" }, createAlert, "after"); // When the other button is clicked, // publish to the "alertUser" topic on(anotherButton, "click", function(evt){ topic.publish("alertUser", "I am also alerting you."); }); }); // Register the alerting routine with the "alertUser" topic. topic.subscribe("alertUser", function(text){ alert(text); }); }); </script> </head> <body> <button id="alertButton">Alert the user</button> <button id="createAlert">Create another alert button</button> </body> </html>
订阅/发布模式是靠主题把事件和事件处理函数联系起来的。如果你想停止接收主题,topic.subscribe方法返回一个对象,该对象具有remove方法,可以用来删除相应的处理程序。
dojo.subscribe = function(/*String*/ topic, /*Object|null*/ context, /*String|Function*/ method)
subscribe 函数用来订阅某一主题;参数 topic 表示主题名字,是一个字符串; context 是接收到主题后调用的事件处理函数所在的对象,function 是事件处理函数名。
dojo.publish = function(/*String*/ topic, /*Array*/ args)
发布某一主题;参数 topic 是主题的名字,args 表示要传递给主题处理函数的参数,它是一个数组,可以通过它传递多个参数给事件处理函数。
参考文献:1.http://dojotoolkit.org/documentation/tutorials/1.9/events/
2.http://www.ibm.com/developerworks/cn/web/wa-lo-dojointro3/