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

源代码：
<%@ 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>
效果
dojo1.9学习总结（三）-事件绑定

猜你在找的Dojo相关文章
