Dojo初探之4:dojo的event（鼠标/键盘）事件绑定操作（基于dojo1.11.2版本）
前言：
上一章详解了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初探之4:dojo的event（鼠标/键盘）事件绑定操作（基于dojo1.11.2版本）的更多相关文章
- Dojo初探之3:dojo的DOM操作、query操作和domConstruct元素位置操作（基于dojo1.11.2版本）
前言: 前面两章讲了dojo的基本规范和配置,当然这个配置不是必须的,当你有这需求的时候就可以用到dojo的config配置. dojo的所有js都是符合AMD规范进行异步加载的:http://blo ...
- Dojo初探之5:dojo的request（请求）操作、请求过程事件绑定和隐藏数据data()操作（基于dojo1.11.2版本）
前言: 上一章详细阐述了dojo的事件绑定操作,本章将讲解dojo的请求操作 注:dojo的请求操作与js和jquery完全不同! 1.dojo的请求 dojo通过request.get()/.put ...
- JS基础内容小结（event 鼠标键盘事件）（三）
var ev=ev||event 兼容性处理 得到焦点为 onfocus 失去焦点 onblur return false能阻止部分函数的执行 obj.select 选择指定元素里的文本内容 ———— ...
- Linux 模拟 鼠标 键盘 事件
/************************************************************************ * Linux 模拟 鼠标 键盘 事件 * 说明: ...
- Python——pyHook监听鼠标键盘事件
pyHook包为Windows中的全局鼠标和键盘事件提供回调. 底层C库报告的信息包括事件的时间,事件发生的窗口名称,事件的值,任何键盘修饰符等. 而正常工作需要pythoncom等操作系统的API的 ...
- QT 11 鼠标键盘事件添加
鼠标事件 void mousePressEvent(QMouseEvent *event); //单击 void mouseReleaseEvent(QMouseEvent *event); //释放 ...
- 【转】Qt鼠标键盘事件
http://blog.csdn.net/lovebird_27/article/details/50351336 Qt 程序需要在main()函数创建一个QCoreApplication对象,然后调 ...
- Tkinter 鼠标键盘事件（一）
一: 鼠标事件 <Button-1> 鼠标左键单击 ...
- Python - selenium_WebDriver 鼠标键盘事件
from selenium import webdriver #引入ActionChains类 提供了鼠标的操作方法 from selenium.webdriver.common.action_cha ...
随机推荐
- storage在IE8下的兼容性写法
storage 本地缓存,这是HTML5的一个非常好用的地方,具体好用在哪,网上可以找到很多,但是我觉得总结的都不是很完整,我建议大家有空的话可以看下JavaScript权威指南这本书,里面对于这个方 ...
- .net之DateTime
Console.WriteLine(DateTime.Now.Year); Console.WriteLine(DateTime.Now.Month); Console.WriteLine(DateT ...
- swoole使用 常用案例
swoole使用 服务器及客户端 4种服务器[tcp/udp/web/websocket] TCP服务器 //创建Server对象,监听 127.0.0.1:9501端口 $serv = new sw ...
- stl string常用函数
string类的构造函数: string(const char *s); //用c字符串s初始化 string(int n,char c); //用n个字符c初始化 此外,string类还支持默认构造 ...
- 《快学Scala》——控制结构和函数
条件表达式 在Scala中if/else表达式有值,这个值就是跟在if或else之后的表达式的值.例如: if (x > 0) 1 else -1 上述表达式的值是1或-1,具体是哪一个取决于x ...
- java虚拟机--jvm client模式与server模式的区别
JVM Server模式与client模式启动,最主要的差别在于:-Server模式启动时,速度较慢,但是一旦运行起来后,性能将会有很大的提升.JVM如果不显式指定是-Server模式还是-clien ...
- jQuery 操作属性
jQuery 操作属性 我们来看看jQuery 操作属性都有哪些???? 属性 css代码!! html代码!! jQuery代码!! 下面做一个小例子 小例子html的代码 小例子jQuery的代码 ...
- Java IO详解（六)------序列化与反序列化（对象流）
File 类的介绍:http://www.cnblogs.com/ysocean/p/6851878.html Java IO 流的分类介绍:http://www.cnblogs.com/ysocea ...
- STM32采集电阻触摸贴膜
今天为了解决一个测量电阻屏压力的问题,自己直接用STM32做了一个测量电阻屏的程序(直接把触摸屏的四根线接到单片机引脚上),通过AD切换采集,采集X轴电压,Y轴电压,和压力..最后附上自己的程序 先说 ...
- 通过vmware 启动cloudera-quickstart-vm-5.10.0-0-vmware.zip镜像无法启动。
解压cloudera-quickstart-vm-5.10.0-0-vmware.zip中找到cloudera-quickstart-vm-5.10.0-0-vmware.vmx文件打开注释点#msg ...