Dojo入門：dojo中的事件處理

JS為DOM添加事件

在原生的環境下，為DOM添加事件處理函數有多種方法：

<input type="button" name="btn" value="點擊…" id="btn" onclick="btnClick" />

或者使用以下方法：

    <input type="button" name="btn" value="點擊…" id="btn" />
    <script type="text/javascript">
        function btnClick() {
            alert("我被點擊了");
        }
        document.getElementById("btn").onclick = btnClick;</script>

 

以上這兩種方法存在明顯的弊端：每一個事件只能指定一個事件處理函數，另外，如果要移除一個事件處理函數，似乎只能使用：

document.getElementById("btn").onclick = null;

 

或者

document.getElementById("btn").onclick = "";

 

這種方式極不利於模塊化編程。W3C DOM Level2 標准有了新的事件模型，新的事件模型允許為事件添加多個處理方法，並加入了事件冒泡機制。

使用新的事件模型來添加事件處理方法：

    <input type="button" name="btn" value="點擊…" id="btn" />
    <script type="text/javascript">
        function btnClick() {
            alert("我被點擊了");
        }
        document.getElementById("btn").addEventListener("click", btnClick);
    </script>

 

移除一個事件處理方法：

document.getElementById("btn").removeEventListener("click", btnClick);

 

 

dojo事件處理

dojo使用connect方法為DOM添加事件處理函數。

    <script type="text/javascript">
        function btnClick() {
            alert("我被點擊了");
        }
        var btn = dojo.byId("btn");
        dojo.connect(btn, "onclick", btnClick);
    </script>

 

dojo.connect方法的官方解釋：dojo.connect is the core event handling and delegation method in Dojo. It allows one function to "listen in" on the execution of any other, triggering the second whenever the first is called. Many listeners may be attached to a function, and source functions may be either regular function calls or DOM events.

翻譯過來大概是：dojo.connect 是dojo中事件處理和委托方法的核心。它允許一個方法去“監聽”另一個方法的執行，當被監聽方法被調用的時候觸發監聽方法。一個方法可以附加很多監聽者，這個源方法可以是常規的方法或DOM事件。

這么說來，connect還可以監聽別的方法的執行，下面我們來做一個測試：

    <input type="button" name="btn" value="點擊…" id="btn" />
    <script type="text/javascript">
        function sayHello() {
            alert("Hello ");
        }

        function sayWorld() {
            alert("world~");
        }

        dojo.addOnLoad(function () {
            var btn = dojo.byId("btn");
            btn.addEventListener("click", sayHello);
            dojo.connect("sayHello", sayWorld);
        });
    </script>

 

這段代碼的執行效果是當按鈕被點擊之后，先彈出一個Hello字符串，當把對話框關掉以后，會彈出另外一個world對話框。

可能不是每個人都喜歡這種處理方式，但這樣以來，代碼會更易於閱讀。

如果需要移除一個事件，則需要調用dojo.disconnect方法，這個方法需要一個dojo.connect方法的返回值作為參數：

        var handle = dojo.connect(btn, "onclick", btnClick);
        dojo.disconnect(handle);

 

訂閱和發布

這是dojo很值得關注的一個功能，它使得各個dojo組件可以方便的交互。這個功能使用起來很方便：

    <input type="text" name="txtMessage" value="" id="txtMessage" />
    <input type="button" name="btn" value="發布…" id="btnPublish" />
    <script type="text/javascript">
        dojo.addOnLoad(function () {
            //訂閱MesagePublish主題
            dojo.subscribe("MessagePublish", function (msg) {
                alert(msg);
            });

            var btnPublish = dojo.byId("btnPublish");
            dojo.connect(btnPublish, "onclick", function () {
                dojo.publish("MessagePublish", dojo.byId("txtMessage").value);
            });
        });
    </script>

 

以上代碼的運行效果如圖：

如要取消一個訂閱，需要使用dojo.unsubscribe方法，這個方法需要一個由dojo.subscribe返回的句柄，其處理方式和dojo.connect、dojo.disconnect 的方式一樣。