源代码：
<%@ page language="java" contentType="text/html; charset=utf-8" pageEncoding="utf-8"%> <% String path = request.getContextPath(); // 获得项目完全路径（假设你的项目叫MyApp，那么获得到的地址就是 http://localhost:8080/MyApp/）: String basePath = request.getScheme() + "://" + request.getServerName() + ":" + request.getServerPort() + path + "/"; %> <html> <head> <Meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <link rel="stylesheet" type="text/css" href="<%=basePath%>dojo/dijit/themes/soria/soria.css"> <link rel="stylesheet" type="text/css" href="<%=basePath%>dojo/dojo/resources/dojo.css" /> <link rel="stylesheet" type="text/css" href="<%=basePath%>dojo/dojox/grid/resources/soriaGrid.css" /> <style type="text/css"> body,html { font-family: helvetica,arial,sans-serif; font-size: 90%; } th { font-size: 13px; font-family: Arial,Microsoft YaHei,SimSun,sans-serif !important; text-align: center; } td { font-size: 13px; font-family: Arial,sans-serif !important; } div #copyright { text-align: center } </style> </head> <script type="text/javascript" src="<%=basePath%>dojo/dojo/dojo.js" djConfig="parSEOnLoad:true"> </script> <script type="text/javascript"> dojo.require("dijit.layout.ContentPane"); dojo.require("dijit.layout.BorderContainer"); dojo.require("dijit.layout.AccordionContainer"); dojo.require("dijit.layout.TabContainer"); dojo.require("dijit.form.Button"); dojo.require("dijit.Dialog"); dojo.require("dojo.parser"); </script> <script type="text/javascript"> //利用dojo.connect和dojo.disconnect来进行事件绑定 var handler = null; function connect() { var btn1 = dojo.byId("btn1"); var btn2 = dojo.byId("btn2"); var span = dojo.byId("span1"); handler = dojo.connect(btn1,"onclick",function(evt) { dojo.style(span,"backgroundColor","green"); }); } function disconnect() { var span = dojo.byId("span1"); dojo.disconnect(handler); dojo.style(span,"blue"); } //还可以这样用dojo.connect function connect1() { var span = dojo.byId("span1"); //这里只能使用dojo.query,使用dojo.byId("btn1")会出错 handler = dojo.query("#btn1").connect("onclick","red"); }); } //可以利用dojo.stopEvent()和evt.preventDefault()来阻止浏览器处理DOM事件 //还可以connect一个var对象中的事件 function connect2() { var btn1 = dojo.byId("btn1"); var btn2 = dojo.byId("btn2"); var myObject = { id : "myObject",onClick : function(evt) { alert("the scope of this handler is " + this.id); } }; dojo.connect(btn1,myObject.onClick); //注意这里的第三个参数myObject,表明了绑定事件的context(上下文),默认情况下不用此参数 dojo.connect(btn2,myObject,myObject.onClick); } //publish/subscribe function subscribe() { //直接订阅信息，但不针对某个具体的目标 handler = dojo.subscribe("hi",function(evt) { alert(evt); }); } function alertUser() { var text = [ "i am alert you" ]; //直接发布消息，但不针对某个具体的目标 dojo.publish("hi",text); dojo.unsubscribe(handler); } function anotherAlert() { var text = [ "i am another alert you" ]; //直接发布消息，但不针对某个具体的目标 dojo.publish("hi",text); } dojo.ready(subscribe); </script> <body class="soria"> <div id="container"> <button id="btn1" data-dojo-type="dijit.form.Button">click me</button> <button id="btn2" data-dojo-type="dijit.form.Button" data-dojo-props="onClick:disconnect">disconnect</button> <span id="span1">this is text</span> <br /> <button id="alertButton" data-dojo-type="dijit.form.Button" data-dojo-props="onClick:alertUser">alert the user</button> <button id="createAlert" data-dojo-type="dijit.form.Button" data-dojo-props="onClick:anotherAlert">another</button> </div> </body> </html>
效果