dojo1.9学习总结（三）-事件绑定

来源：互联网发布：广州新梦想网络骗局编辑：程序博客网时间：2024/05/28 17:05
源代码：
<%@ 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, Microsoft YaHei, SimSun, 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, "backgroundColor", "blue");}//还可以这样用dojo.connectfunction connect1() {var span = dojo.byId("span1");//这里只能使用dojo.query,使用dojo.byId("btn1")会出错handler = dojo.query("#btn1").connect("onclick", function(evt) {dojo.style(span, "backgroundColor", "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, "onclick", myObject.onClick);//注意这里的第三个参数myObject,表明了绑定事件的context(上下文),默认情况下不用此参数dojo.connect(btn2, "onclick", myObject, myObject.onClick);}//publish/subscribefunction 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>
效果
0 0