前言：

上一章详解了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. Java设置Excel有效性

    XSSFWorkbook wb = new XSSFWorkbook(); XSSFSheet sheet = wb.createSheet("Excel"); String[] ...

  2. 我喜欢的程序语言c++

    我喜欢的程序语言c++我喜欢的程序语言c++

  3. linux性能分析及调优

    第一节:cpu 性能瓶颈 计算机中,cpu是最重要的一个子系统,负责所有计算任务: 基于摩尔定律的发展,cpu是发展最快的一个硬件,所以瓶颈很少出现在cpu上: 我们线上环境的cpu都是多核的,并且基 ...

  4. Dora.Interception: 一个为.NET Core度身定制的AOP框架

    多年从事框架设计开发使我有了一种强迫症,那就是见不得一个应用里频繁地出现重复的代码.之前经常Review别人的代码,一看到这样的程序,我就会想如何将这些重复的代码写在一个地方,然后采用“注入”的方式将 ...

  5. poj3020二分图匹配

    The Global Aerial Research Centre has been allotted the task of building the fifth generation of mob ...

  6. 分针网—IT教育： jquery选择器的用法

    jQuery选择器是jQuery库的一大特色,用这些选择器不但可以省去繁琐的JavaScript 书写方式,还可以节省时间和效率,正是有这些jQuery选择器,才让我们更容易的操作JavaScript ...

  7. elasticsearch系列（二） esrally压测

    环境准备 linux centOS(工作环境) python3.4及以上 pip3 JDK8 git1.9及以上 gradle2.13级以上 准备过程中的坑 这些环境准备没什么太大问题,都是wget下 ...

  8. mysql5.7.16二进制安装

    1.下载二进制文件  cd /data  wget http://dev.mysql.com/get/Downloads/MySQL-5.7/mysql-5.7.16-linux-glibc2.5-x ...

  9. java泛型探索——小特性

    泛型特性(小篇幅) 1. 补充介绍一些常见的泛型特性: 类型参数T可以是recursive(类似递归性),它的边界可以是类型参数是自身的接口或类. 如我实现寻找最大值的方法,可以这么写: public ...

  10. Linux command not found 问题解释

    执行可执行文件 执行文件就是具有可执行权限的文件,如果在文件所在目录上执行 ll 或 ls -l命令时,可能看到如下结果:-rwxr-xr-- 1 usr users 289 Jul 29 09:15 ...