源代码:
<%@ 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"> var bar = "bar"; var myObject = { id : "objectId",bar : "myObject-bar",onClick : function(evt) { var console = dojo.byId("console"); console.innerHTML = "the bar value is " + this.bar; } }; function getValue() { //此时bar="myObject-bar" myObject.onClick(); } function getValue1() { var console = dojo.byId("console"); var myObject1 = { id : "objectId",bar : "myObject1-bar",onClick : function(evt) { console.innerHTML = "the bar value is " + this.bar; } }; //此时bar="myObject1-bar" myObject1.onClick(); } function getValue2() { //此时bar=undefined,函数上下文被改变 dojo.query("#btnValue2").connect("onclick",myObject.onClick); } //可以应用.apply和.call改变上下文 function getValue3() { dojo.query("#btnValue3").connect("onclick",function fun(evt) { myObject.onClick.call(myObject,evt); }); } function getValue4() { //dojo.query("#btnValue4").connect("onclick",dojo.hitch(myObject,myObject.onClick)); //还可以这样写 var change = dojo.hitch(myObject,myObject.onClick);//返回结果是一个函数 dojo.query("#btnValue4").connect("onclick",change); } </script> <body class="soria"> <div id="container"> <button id="btnValue" data-dojo-type="dijit.form.Button" data-dojo-props="onClick:getValue">getvalue</button> <button id="btnValue1" data-dojo-type="dijit.form.Button" data-dojo-props="onClick:getValue1">getvalue1</button> <button id="btnValue2" data-dojo-type="dijit.form.Button" data-dojo-props="onClick:getValue2">getvalue2</button> <button id="btnValue3" data-dojo-type="dijit.form.Button" data-dojo-props="onClick:getValue3">getvalue3</button> <button id="btnValue4" data-dojo-type="dijit.form.Button" data-dojo-props="onClick:getValue4">getvalue4</button> </div> <div id="console" style="float: left; width: 400px;">div</div> </body> </html>
效果: