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 ...
随机推荐
- 关于mpu6050的几个很好的帖子
最近在研究6050,真是很磨人啊,这个小东西还挺复杂,一个读取程序竟然需要600多行. 这几天连查资料找到了几个很好的帖子,要是以后有人看到这篇帖子,可以避免误入歧途,也可以省去很多时间. 1.阿西莫 ...
- 统计学习方法:核函数(Kernel function)
作者:桂. 时间:2017-04-26 12:17:42 链接:http://www.cnblogs.com/xingshansi/p/6767980.html 前言 之前分析的感知机.主成分分析( ...
- Fill-rate, Canvases and input 【译】
翻译自https://unity3d.com/cn/learn/tutorials/topics/best-practices/fill-rate-canvases-and-input?playlis ...
- python之爬虫学习记录与心得
之前在寒假的时候,学习了python基础.在慕课网上看的python入门:http://www.imooc.com/learn/177 python进阶:http://www.imooc.com/le ...
- add,update,list.jsp源码
add:<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncod ...
- Java面试小试题
面试是我们每个人都要经历的事情,大部分人且不止一次,这里给大家总结最新的2016年面试题,让大家在2017年找工作时候能够事半功倍. 1 Switch能否用string做参数? a.在 Java 7 ...
- [刷题]算法竞赛入门经典(第2版) 4-6/UVa508 - Morse Mismatches
书上具体所有题目:http://pan.baidu.com/s/1hssH0KO 代码:(Accepted,10 ms) //UVa508 - Morse Mismatches #include< ...
- 浅谈RSA加密
RSA背景 在1976年以前,传统的加解密过程是: 1.A采用某种手段对数据进行加密. 2.数据传输到B的手中. 3.B逆向的实施A加密采用的步骤. 4.数据被还原. 这就是所谓的对称加密. 解密和加 ...
- Python ORM框架之 Peewee入门
之前在学Django时,发现它的模型层非常好用,把对数据库的操作映射成对类.对象的操作,避免了我们直接写在Web项目中SQL语句,当时想,如果这个模型层可以独立出来使用就好了,那我们平台操作数据库也可 ...
- 掌握Docker命令
1.管理镜像命令 获取镜像 docker push ubuntu:14:04 查看镜像列表 docker images 重命名image docker tag IMAGE-NAME NEW-IMAGE ...