您的位置：首页 > 其它

Dojo初探之4:dojo的event（鼠标/键盘）事件绑定操作（基于dojo1.11.2版本）

2016-08-21 21:24 633 查看

前言：

上一章详解了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请求

内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理

标签： dojo AMD规范模块化事件

相关文章推荐

新的分享

章节导航