DOJO常用的：

1，通過dojo.require以類似C編程中#include或者Java中import的方式加載所需的部件
如dojo.require("dojo.parser");dojo.require("dijit.form.Button");
2，跨域自定義模塊
Dojo配置，djConfig="baseUrl:'./'"
注冊模塊的路徑，dojo.registerModulePath("dtdg","./dtdg");
加載自定義模塊，dojo.require("dtdg.foo");
3，本地工具箱模塊
直接加載自定義模塊，dojo.require("dtdg.foo");
4，為對象注冊事件
dojo.connect();
5，json和字符串之間轉換
dojo.fromJson(/*String*/ json);//返回JavaScript對象，json對象
dojo.toJson(/*Object*/ json, /*Boolean*/ prettyPrint);//返回字符串
6，Ajax通信
dojo.xhrGet(/*Object*/ args);dojo.xhrPost(/*Object*/ args);
dojo.xhr(/*String*/ method, /*Object*/ args, /*Boolean?*/ hasBody);
7，本地化
djConfig="dojo.local:'zh'"
8，控件、布局等都在dijit中

介紹

每個流行的工具包中，總有一些異常出彩的閃光點。dojo.connect就是dojo工具包中，與JavaScript事件機制相關的重磅功能。
在JavaScript的使用場景中，我們經常需要偵聽某些事件的觸發，然后進行相應的（函數）處理。比如最常見的，當點擊登錄頁面的登錄節點時，JavaScript能夠察覺到，並隨之將用戶登錄信息發送到后台。下面先來看看dojo.connect的參數[http://docs.dojocampus.org/dojo/connect]：

dojo.connect(obj, event, context, method, dontFix);

參數	類型	描述
obj	Object\|null	事件關聯的對象。最常見的是DOM node，關聯的事件會被委托到DOM事件管理器（除非dontFix為true）；也可以是其他JavaScript Object；或者干脆就是null，這時就是默認為dojo.global （window）。
event	String	上面obj需要關聯的事件的名稱。比如DOM node的”onclick”之類的。
context	Object\|null	前面兩個參數講的都是關聯的“源”，這兒開始就是講關聯的“目標”了。context為后面的method提供了執行上下文環境，相當於method的this。如果context為null且method是一個function，則method會繼承event的context。如果method是一個string，則context必須是method的源對象。如果context為null，則默認為dojo.global。
method	String\|Function	當event被觸發后調用的目標函數。可以是函數引用，或者context中的函數名稱。此method會拿到和事件同樣的參數。
dontFix	Boolean	可選項。如果obj參數是DOM node，當設置dontFix為true時，可以阻止關聯被委托到DOM事件管理器。（貌似很強大的功能）

從表面上看，dojo.connect就是一個單純的函數，完成單純的事件關聯功能。但由於支持參數的靈活配置及和其他dojo函數的有機組合，有時候可以造成一些奇妙效果。而探索這些效果並用於解決一些特定的問題，正是技術的魅力所在吧！
這兒很淺顯地討論一些目前能想到的dojo.connect特性。也歡迎有興趣的同志給出更多的應用場景。

關聯事件，不僅僅是DOM Event

當然dojo.connect最常用的地方還是關聯DOM Event。但之所以先撇開DOM不談，一方面是在用慣（煩？）了用dojo.connect關聯DOM Event的方式后，對非DOM的事件關聯正有新鮮感，另一方面，通過下面的例子，也可以幫助更好地理解上面dojo.connect的參數說明。
首先是一個比較“官方”的例子：

function a(){  
    console.log("a")  
};  
function b(){  
    console.log("b");  
}  
dojo.connect(null,"a",null,b);  
a();

執行結果：a

意思是，只要執行了函數a()，函數b()會同時被調用。這個沒有任何實際意義的例子對大家可能不太有吸引力。那下面就舉一個context更復雜的實際例子：現在我們有一個頁面，上面內嵌了帶一個dijit.layout.ContentPane的dijit.layout.TabContainer。content pane里面是頁面內容。當點擊上面的save按鈕時，輸入框中的內容就會被保存，且同時在頁面上出現保存提示。從需求中可以看到，“出現提示”這個功能是伴隨着其他事件的發生而發生的，因此這兒就可以用dojo.connect來實現。代碼如下：

<html>  
    <head>  
        <title>Test dojo.connect</title>  
        <link rel="stylesheet" type="text/css" href="js/dojo-1.5.0/dijit/themes/dijit.css" mce_href="js/dojo-1.5.0/dijit/themes/dijit.css"></link>  
        <link rel="stylesheet" type="text/css" href="js/dojo-1.5.0/dijit/themes/tundra/tundra.css" mce_href="js/dojo-1.5.0/dijit/themes/tundra/tundra.css"></link>  
        <mce:script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/dojo/1.6/dojo/dojo.xd.js" mce_src="http://ajax.googleapis.com/ajax/libs/dojo/1.6/dojo/dojo.xd.js" djConfig="parseOnLoad:false"></mce:script>  
        <mce:script type="text/javascript"><!--  
            dojo.require("dojo.parser");  
            dojo.require("dijit.layout.TabContainer");  
            dojo.require("dijit.layout.ContentPane");  
              
            dojo.addOnLoad(function(){  
                dojo.declare("Test", [ dijit.layout.ContentPane ], {  
                    postCreate: function(){  
                        dojo.connect(this,"save",null,this.showMsg);  
                        dojo.connect(dojo.byId("save"), "onclick", this, this.save);  
                    },  
                      
                    save:function(){  
                        console.log("save");  
                    },  
                      
                    showMsg:function(){  
                        var node = dojo.byId("showMsg");  
                            node.innerHTML = "You are saving your mostly used dojo object...";  
                        dojo.style(node, "display","block");  
                    }  
                });  
                dojo.parser.parse();  
            });  
              
          
// --></mce:script>  
    </head>  
    <body class="tundra">  
        <div style="width: 800px; height: 200px">  
            <div dojoType="dijit.layout.TabContainer" style="width: 100%; height: 100%;">  
                <div dojoType="Test" title="Space" id="cp">  
                    <div style="background-color:yellow;display:none;" mce_style="background-color:yellow;display:none;" id="showMsg">  
                    </div>  
                    <br/>  
                    Please input your mostly used dojo object:  
                    <br/>  
                    <input type="text" id="text"/>  
                    <br/>  
                    <input type="button" id="save" value="Save" />  
                </div>  
            </div>  
        </div>  
    </body>  
</html>

這兒dojo.connect(this,"save",null,this.showMsg)中，由於save函數屬於Test，因此dojo.connect的第一個參數必須指定save的對象是this。第二個參數給定關聯的事件為save。第四個參數也需要指定正確的關聯目標事件，也就是this中的showMsg函數。還有一種等價的寫法就是：dojo.connect(this,"save", this,”showMsg”)。
現在開發者決定在頁面上增加一個reset按鈕，當點擊時，輸入框中的內容則會被清楚，同時出現清除內容提示。可以看到，同樣是顯示提示的需求，我們可以采用與關聯save相同的辦法將reset與showMsg關聯。更多的，為了在不同的事件觸發showMsg后會顯示不同內容的提示，需要對dojo.connect的參數做一些變動。例子如下：

<html>  
    <head>  
        <title>Test Startup</title>  
        <link rel="stylesheet" type="text/css" href="js/dojo-1.5.0/dijit/themes/dijit.css" mce_href="js/dojo-1.5.0/dijit/themes/dijit.css"></link>  
        <link rel="stylesheet" type="text/css" href="js/dojo-1.5.0/dijit/themes/tundra/tundra.css" mce_href="js/dojo-1.5.0/dijit/themes/tundra/tundra.css"></link>  
        <mce:script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/dojo/1.6/dojo/dojo.xd.js" mce_src="http://ajax.googleapis.com/ajax/libs/dojo/1.6/dojo/dojo.xd.js" djConfig="parseOnLoad:false"></mce:script>  
        <mce:script type="text/javascript"><!--  
            dojo.require("dojo.parser");  
            dojo.require("dijit.layout.TabContainer");  
            dojo.require("dijit.layout.ContentPane");  
              
            dojo.addOnLoad(function(){  
                dojo.declare("Test", [ dijit.layout.ContentPane ], {  
                    postCreate: function(){  
                        dojo.connect(this,"save",{"msg":"You are saving your mostly used dojo object..."},this.showMsg);  
                        dojo.connect(this,"reset",{"msg":"Your input is reset"},this.showMsg);  
                        dojo.connect(dojo.byId("save"), "onclick", this, this.save);  
                        dojo.connect(dojo.byId("reset"), "onclick", this, this.reset);  
                    },  
                      
                    save:function(){  
                        console.log("save");  
                    },  
                      
                    reset:function(){  
                        dojo.byId("text").value = "";  
                    },  
                      
                    showMsg:function(){  
                        console.log("showMsg");  
                        var node = dojo.byId("showMsg");  
                        node.innerHTML = this.msg;  
                              
                        dojo.style(node, "display","block");  
                    }  
                });  
                dojo.parser.parse();  
            });  
              
          
// --></mce:script>  
    </head>  
    <body class="tundra">  
        <div style="width: 800px; height: 200px">  
            <div dojoType="dijit.layout.TabContainer" style="width: 100%; height: 100%;">  
                <div dojoType="Test" title="Space" id="cp">  
                    <div style="background-color:yellow;display:none;" mce_style="background-color:yellow;display:none;" id="showMsg">  
                    </div>  
                    <br/>  
                    Please input your mostly used dojo object:  
                    <br/>  
                    <input type="text" id="text"/>  
                    <br/>  
                    <input type="button" id="reset" value="Reset" />  
                    <input type="button" id="save" value="Save" />  
                </div>  
            </div>  
        </div>  
    </body>  
</html>

在最新的dojo.connect(this,"save",{"msg":"You are saving your mostly used dojo object..."},this.showMsg) 中，第三個參數變成了一個自定義對象，並在showMsg中用this取到值后顯示相應的提示信息。想象一下如果有很多個按鈕的點擊事件需要關聯showMsg函數，比起在每個事件中直接調用showMsg，像例子中這樣集中用dojo.connect進行事件關聯，將會大大提高代碼的整潔性和可擴展性。更進一步可以將上面的dojo.connect調用改造成：

var list = [  
    {  
        func:"save",  
        msg:"You are saving your mostly used dojo object..."  
    },  
    {  
        func:"reset",  
        msg:"Your input is reset"  
    }];  
var that = this;  
dojo.forEach(list, function(item){  
    dojo.connect(that, item.func, item, that.showMsg);  
});

最后總結一下，dojo.connect在非DOM event的事件關聯應用中，也可以扮演關鍵角色，在實現功能的同時，提高代碼的整潔性和可擴展性。

轉自：http://blog.csdn.net/eengel/article/details/6416550

http://www.cnblogs.com/gisland/archive/2010/09/03/1816922.html

免責聲明！

本站轉載的文章為個人學習借鑒使用，本站對版權不負任何法律責任。如果侵犯了您的隱私權益，請聯系本站郵箱yoyou2525@163.com刪除。

猜您在找 使用dojo.connect()添加事件的注意事項 Dojo入門：初識Dojo DOJO 八 event dojo/on dojo 七 DOM dojo/dom Dojo入門：初識Dojo dojo入門 dojo 總結 Dojo學習筆記（一）：Hello Dojo! Dojo入門與dojo項目配置方案 dojo(六):聲明式語法和dojo/parser