Dojo introduction: event handling in Dojo

Recommended for you: Get network issues from WhatsUp Gold. Not end users.

JS add DOM event

In the native environment, add DOM event handling function in a variety of ways:

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

Or use the following method:

复制代码

    <input type="button" name="btn" value="Click…" id="btn" />
    <script type="text/javascript">
        function btnClick() {
            alert("I was clicked");
        }
        document.getElementById("btn").onclick = btnClick;</script>

复制代码


The above two methods have obvious disadvantages: each event can specify only one event handler function, in addition, if you want to remove an event handler, seem to use only:

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

Or

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

This approach is not conducive to the modular programming. W3C DOM Level2 standard is a new event model, a new event model allows you to add more processing methods for the event, and joined the event bubbling mechanism.

Using the new event model to add the event handler method:

复制代码

    <input type="button" name="btn" value="Click…" id="btn" />
    <script type="text/javascript">
        function btnClick() {
            alert("I was clicked");
        }
        document.getElementById("btn").addEventListener("click", btnClick);
    </script>

复制代码


Remove an event handling method.:

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


The dojo event handling

Dojo uses the connect method to add the event handler for the DOM.

复制代码

    <script type="text/javascript">
        function btnClick() {
            alert("I was clicked");
        }
        var btn = dojo.byId("btn");
        dojo.connect(btn, "onclick", btnClick);
    </script>

复制代码


The official explanation of dojo.connect method: 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.

It is about: dojo.connect is the key event processing and principal method in dojo. It allows a method to monitor the “ ” another method execution, when monitoring method is called when the trigger monitor method. A method to add a lot of the listener, the source method may be a conventional method or the DOM event.

That said, connect also can monitor the other methods of execution, we do a test:

复制代码

    <input type="button" name="btn" value="Click…" 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>

复制代码


This code execution is when the button is clicked, to pop up a Hello string, when the dialog box will pop up off, another world dialog.

Not everyone likes this treatment, but in this way, the code easier to read.

If you need to remove an event, you need to call the dojo.disconnect method, the return value of the method requires a dojo.connect method as a parameter:

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

Subscription and publishing

This is a function of dojo is very worthy of attention, it makes all the dojo components can facilitate the interaction. This function is very easy to use:

复制代码

    <input type="text" name="txtMessage" value="" id="txtMessage" />
    <input type="button" name="btn" value="Release…" id="btnPublish" />
    <script type="text/javascript">
        dojo.addOnLoad(function () {
            //Subscribe to the MesagePublish theme
            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>

复制代码


Effect of operation the above code in Figure:

If you want to cancel a subscription, you need to use the dojo.unsubscribe method, this method requires a handle returned by dojo.subscribe, the processing method and dojo.connect, dojo.disconnect in the same way.

Recommended from our users: Dynamic Network Monitoring from WhatsUp Gold from IPSwitch. Free Download

Posted by Harold at November 15, 2013 - 8:06 AM