dojo(二):事件处理

前端之家收集整理的这篇文章主要介绍了dojo(二):事件处理前端之家小编觉得挺不错的,现在分享给大家,也给大家做个参考。

1、在正式进入dojo事件之前,先看一下如何使用dojoConfig配置dojo的行为。

有两种方式配置,第一种方式使用dojoConfig:

  1. <!-- set Dojo configuration,load Dojo -->
  2. <script>
  3. dojoConfig= {
  4. has: {
  5. "dojo-firebug": true
  6. },parSEOnLoad: false,foo: "bar",async: true
  7. };
  8. </script>
  9. <script src="//ajax.googleapis.com/ajax/libs/dojo/1.9.1/dojo/dojo.js"></script>
第二种方式,使用data-dojo-config属性
  1. <script src="//ajax.googleapis.com/ajax/libs/dojo/1.9.1/dojo/dojo.js"
  2. data-dojo-config="has:{'dojo-firebug': true},foo: 'bar',async: 1">
  3. </script>
两种方式是等价的。

2、DOM事件

Dojo改进了Dom事件处理,通过处理浏览器差异,防止内存泄露等。dojo通过调用dojo/on处理DOM事件。

  1. require(["dojo/on","dojo/dom","dojo/dom-style","dojo/mouse","dojo/domReady!"],function(on,dom,domStyle,mouse) {
  2. var myButton = dom.byId("myButton"),myDiv = dom.byId("myDiv");
  3. on(myButton,"click",function(evt){
  4. domStyle.set(myDiv,"backgroundColor","blue");
  5. });
  6. on(myDiv,mouse.enter,"red");
  7. });
  8. on(myDiv,mouse.leave,"");
  9. });
  10. });

Note:默认情况下,dojo/on会以传入的节点(第一个参数)作为上下文环境执行事件处理方法。当需要进行事件委托时,上面的方法需要稍作改动,我们可以使用dojo/_base/lang.hitch来指定事件处理方法执行的上下文环境。


3、NodeList事件

  1. <button id="button1" class="clickMe">Click me</button>
  2. <button id="button2" class="clickMeAlso">Click me also</button>
  3. <button id="button3" class="clickMe">Click me too</button>
  4. <button id="button4" class="clickMeAlso">Please click me</button>
  5. <script>
  6. require(["dojo/query",function(query,lang) {
  7. var myObject = {
  8. id: "myObject",onClick: function(evt){
  9. alert("The scope of this handler is " + this.id);
  10. }
  11. };
  12. query(".clickMe").on("click",myObject.onClick);
  13. query(".clickMeAlso").on("click","onClick"));
  14. });
  15. </script>
Note:dojo/query返回的结果就是NodeList对象。NodeList是一个JavaScript数组,不过它提供了很多有用的方法来操作数组中的每一个元素。

4、事件发布/订阅

  1. //event.js
  2. define(["dojo/on","dojo/topic","dojo/domReady"],topic){
  3. return {
  4. publish:function(id){
  5. var node = dom.byId(id);
  6. on(node,function(){
  7. topic.publish("alertuser","i am alerting you");
  8. });
  9. }
  10. };
  11. });
  12.  
  13. //index.html
  14. <button id="alertButton">Alert the user</button>
  15. <button id="createAlert">Create another alert button</button>
  16. <script src="dojo-release-1.9.1/dojo/dojo.js" data-dojo-config="async:true"></script>
  17. <script>
  18. require(["custom/event","dojo/topic"],function(event,topic){
  19. event.publish("alertButton");
  20. topic.subscribe("alertuser",function(text){
  21. alert(text);
  22. });
  23. });
  24. </script>
Note:通过dojo/on监听的事件或者通过topic.subscribe订阅的事件都有相应的方法取消。

猜你在找的Dojo相关文章