前言：

上一章详解了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版本）的更多相关文章

  1. Dojo初探之3:dojo的DOM操作、query操作和domConstruct元素位置操作（基于dojo1.11.2版本）

    前言: 前面两章讲了dojo的基本规范和配置,当然这个配置不是必须的,当你有这需求的时候就可以用到dojo的config配置. dojo的所有js都是符合AMD规范进行异步加载的:http://blo ...

  2. Dojo初探之5:dojo的request（请求）操作、请求过程事件绑定和隐藏数据data()操作（基于dojo1.11.2版本）

    前言: 上一章详细阐述了dojo的事件绑定操作,本章将讲解dojo的请求操作 注:dojo的请求操作与js和jquery完全不同! 1.dojo的请求 dojo通过request.get()/.put ...

  3. JS基础内容小结（event 鼠标键盘事件）（三）

    var ev=ev||event 兼容性处理 得到焦点为 onfocus 失去焦点 onblur return false能阻止部分函数的执行 obj.select 选择指定元素里的文本内容 ———— ...

  4. Linux 模拟 鼠标 键盘 事件

    /************************************************************************ * Linux 模拟 鼠标 键盘 事件 * 说明: ...

  5. Python——pyHook监听鼠标键盘事件

    pyHook包为Windows中的全局鼠标和键盘事件提供回调. 底层C库报告的信息包括事件的时间,事件发生的窗口名称,事件的值,任何键盘修饰符等. 而正常工作需要pythoncom等操作系统的API的 ...

  6. QT 11 鼠标键盘事件添加

    鼠标事件 void mousePressEvent(QMouseEvent *event); //单击 void mouseReleaseEvent(QMouseEvent *event); //释放 ...

  7. 【转】Qt鼠标键盘事件

    http://blog.csdn.net/lovebird_27/article/details/50351336 Qt 程序需要在main()函数创建一个QCoreApplication对象,然后调 ...

  8. Tkinter 鼠标键盘事件（一）

    一: 鼠标事件 <Button-1>                                                                     鼠标左键单击 ...

  9. Python - selenium_WebDriver 鼠标键盘事件

    from selenium import webdriver #引入ActionChains类 提供了鼠标的操作方法 from selenium.webdriver.common.action_cha ...

随机推荐

  1. 关于mpu6050的几个很好的帖子

    最近在研究6050,真是很磨人啊,这个小东西还挺复杂,一个读取程序竟然需要600多行. 这几天连查资料找到了几个很好的帖子,要是以后有人看到这篇帖子,可以避免误入歧途,也可以省去很多时间. 1.阿西莫 ...

  2. 统计学习方法：核函数（Kernel function）

    作者:桂. 时间:2017-04-26  12:17:42 链接:http://www.cnblogs.com/xingshansi/p/6767980.html 前言 之前分析的感知机.主成分分析( ...

  3. Fill-rate, Canvases and input 【译】

    翻译自https://unity3d.com/cn/learn/tutorials/topics/best-practices/fill-rate-canvases-and-input?playlis ...

  4. python之爬虫学习记录与心得

    之前在寒假的时候,学习了python基础.在慕课网上看的python入门:http://www.imooc.com/learn/177 python进阶:http://www.imooc.com/le ...

  5. add,update,list.jsp源码

    add:<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncod ...

  6. Java面试小试题

    面试是我们每个人都要经历的事情,大部分人且不止一次,这里给大家总结最新的2016年面试题,让大家在2017年找工作时候能够事半功倍. 1 Switch能否用string做参数? a.在 Java 7 ...

  7. [刷题]算法竞赛入门经典(第2版) 4-6/UVa508 - Morse Mismatches

    书上具体所有题目:http://pan.baidu.com/s/1hssH0KO 代码:(Accepted,10 ms) //UVa508 - Morse Mismatches #include< ...

  8. 浅谈RSA加密

    RSA背景 在1976年以前,传统的加解密过程是: 1.A采用某种手段对数据进行加密. 2.数据传输到B的手中. 3.B逆向的实施A加密采用的步骤. 4.数据被还原. 这就是所谓的对称加密. 解密和加 ...

  9. Python ORM框架之 Peewee入门

    之前在学Django时,发现它的模型层非常好用,把对数据库的操作映射成对类.对象的操作,避免了我们直接写在Web项目中SQL语句,当时想,如果这个模型层可以独立出来使用就好了,那我们平台操作数据库也可 ...

  10. 掌握Docker命令

    1.管理镜像命令 获取镜像 docker push ubuntu:14:04 查看镜像列表 docker images 重命名image docker tag IMAGE-NAME NEW-IMAGE ...