Dojo入門:dojoでのイベント処理


転載先:http://www.cnblogs.com/youring2/archive/2012/06/10/2544168.html
JS DOMにイベントを追加
オリジナル環境では、DOMにイベント処理関数を追加する方法はいくつかあります.

または、次の方法を使用します.
 
    
        function btnClick() {
            alert("     ");
        }
        document.getElementById("btn").onclick = btnClick;

上記の2つの方法には明らかな弊害があります.各イベントには1つのイベント処理関数しか指定できません.また、1つのイベント処理関数を削除する場合は、次のようにしか使用できないようです.
document.getElementById("btn").onclick = null;

または
document.getElementById("btn").onclick = "";

この方式はモジュール化プログラミングに極めて不利である.W 3 C DOM Level 2規格には新しいイベントモデルがあり、新しいイベントモデルはイベントに複数の処理方法を追加し、イベントバブルメカニズムを追加することができる.
新しいイベントモデルを使用して、イベント処理方法を追加します.

    
        function btnClick() {
            alert("     ");
        }
        document.getElementById("btn").addEventListener("click", btnClick);    

イベント処理方法を削除します.
document.getElementById("btn").removeEventListener("click", btnClick);

dojoイベント処理
dojoはconnectメソッドを使用してDOMにイベント処理関数を追加します.
 
        function btnClick() {
            alert("     ");
        }        var btn = dojo.byId("btn");
        dojo.connect(btn, "onclick", btnClick);    

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におけるイベント処理と委任方法の核心である.これにより、あるメソッドが別のメソッドの実行を「リスニング」し、リスニングメソッドが呼び出されるとリスニングメソッドがトリガーされます.1つの方法は、従来の方法またはDOMイベントであってもよい多くのリスナーを追加することができる.
このように、connectは他の方法の実行を傍受することもできます.次に、テストを行います.

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

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

このコードの実行効果は、ボタンがクリックされた後、まずHello文字列がポップアップされ、ダイアログボックスをオフにすると、別のworldダイアログボックスがポップアップされます.
誰もがこのような処理が好きではないかもしれませんが、これによりコードが読みやすくなります.
イベントを削除する必要がある場合はdojoを呼び出す必要があります.disconnectメソッド、このメソッドにはdojoが必要です.connectメソッドの戻り値をパラメータとして使用します.
        var handle = dojo.connect(btn, "onclick", btnClick);
        dojo.disconnect(handle);

購読と配布
これはdojoが注目すべき機能であり、各dojoコンポーネントが便利にインタラクションできるようにしています.この機能は使いやすいです.

    
    
        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);
            });
        });    

以上のコードの実行効果は図の通りです.
Dojo入门:dojo中的事件处理_第1张图片
サブスクリプションをキャンセルするにはdojoを使用します.unsubscribeメソッド、このメソッドにはdojoが必要です.subscribeが返すハンドル、その処理方式とdojo.connect、dojo.disconnectの方式は同じです.