前言：
上一章详解了dojo的dom/query操作，本章基于dom/query基础上进行事件绑定操作
dojo的事件
dojo的事件绑定操作分为鼠标和键盘两种进行详解
1、鼠标事件
我们沿用上一章中所使用的方法进行事件绑定
（1）事件绑定操作：on(页面元素，事件，绑定方法）
// domConstruct.place(操作的元素, 父元素, "位置");位置：first,before,after
require(["dojo/dom-construct", "dojo/on", "dojo/domReady!"],
function(domConstruct, on) {
function moveFirst() {
var list = dom.byId("list"),
three = dom.byId("three");
domConstruct.place(three, list, "first");
}
function moveBeforeTwo() {
var two = dom.byId("two"),
three = dom.byId("three");
domConstruct.place(three, two, "before");
}
function moveAfterFour() {
var four = dom.byId("four"),
three = dom.byId("three");
domConstruct.place(three, four, "after");
}
function moveLast() {
var list = dom.byId("list"),
three = dom.byId("three");
domConstruct.place(three, list);
}
//绑定事件
on(dom.byId("moveFirst"), "click", moveFirst);
on(dom.byId("moveBeforeTwo"), "click", moveBeforeTwo);
on(dom.byId("moveAfterFour"), "click", moveAfterFour);
on(dom.byId("moveLast"), "click", moveLast);
function destroyFirst() {
var list = dom.byId("list"),
items = list.getElementsByTagName("li");
if (items.length) {
//清除某个元素
domConstruct.destroy(items[0]);
}
}
function destroyAll() {
//清空父类下的子元素
domConstruct.empty("list");
}
// 给id为destroyFirst的元素绑定一个点击事件
on(dom.byId("destroyFirst"), "click", destroyFirst);
// 给id为destroyAll的元素绑定一个点击事件
on(dom.byId("destroyAll"), "click", destroyAll);
});（2）页面：
<head>
<title>domTest</title>
<meta charset="utf-8">
<script src="dojo/dojo.js">
</script>
<script src="js/view/domTest.js"></script>
</head>
<body>
<ul id="list">
<li id="one">One</li>
<li id="two">Two</li>
<li id="three">Three</li>
<li id="four">Four</li>
<li id="five">Five</li>
</ul>
<button id="moveFirst">The first item</button>
<button id="moveBeforeTwo">Before Two</button>
<button id="moveAfterFour">After Four</button>
<button id="moveLast">The last item</button>
<button id="destroyFirst">Destroy the first list item</button>
<button id="destroyAll">Destroy all list items</button>
</body>2、键盘事件
（1）绑定键盘事件
var dom = require("dojo/dom");
require(["dojo/on", "dojo/domReady!"], function(on) {
//给document绑定一个松开按键的事件
on(document, "keyup", function(event) {
//把当前按键的值给id为keyCode的元素
dom.byId("keyCode").value = event.keyCode;
});
});
require(["dojo/dom-construct", "dojo/on", "dojo/query", "dojo/keys", "dojo/domReady!"],
function(domConstruct, on, query, keys) {
//给input并且类型是text的标签绑定一个键盘按下事件
query("input[type='text']").on("keydown", function(event) {
switch (event.keyCode) {
case keys.UP_ARROW:
event.preventDefault();
alert("上");
break;
case keys.DOWN_ARROW:
event.preventDefault();
alert("下");
break;
case keys.ENTER:
alert("回车");
break;
default:
alert("其他按键: " + event.keyCode);
}
});
});（2）页面
<head>
<title>键盘事件测试</title>
<meta charset="utf-8">
<script src="dojo/dojo.js">
</script>
<script src="js/view/keyeventTest.js">
</script>
</head>
<body>
<h1>按任意键</h1> keyCode value: <input type="text" id="keyCode" size="2">
<h1>按方向键上、下</h1>
<input type="text" id="input1" value="up">
<input type="text" id="input2" value="down">
<input type="submit" id="send1" value="send"></body>下一章将讲解dojo如何发送ajax请求