前言：

上一章详解了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. EasyUI datagrid默认勾选checkbox时注意事项

    在使用easyui的datagrid默认选中复选框时遇到的一个问题:就是加载程序默认选中复选框时死活选不中,查了好多资料才知道是easyui的datagrid的singleSelect属性设置为‘tr ...

  2. WebService学习--股票走势图+天气预报实现

        互联网上面有很多的免费webService服务,我们可以调用这些免费的WebService服务,将一些其他网站的内容信息集成到我们的Web应用中显示,下面就以获取股票数据和天气预报为例进行学习 ...

  3. 记录下一个C++初始化的方式（很少有人这么用，但是却是一个使代码更加简洁的方式）

    很多时候,在一个类创建的时候给它初始化,一般呢,99%的人都会这么用: //A.h Class CA { int a; char* p; int getValue(); }; //A.cpp CA:: ...

  4. 1019 Least Common Multiple

    Time Limit: 2000/1000 MS (Java/Others)    Memory Limit: 65536/32768 K (Java/Others)Total Submission( ...

  5. 【初识Python】

    一.Python的简介 1.什么是python? Python(发音:[ 'paiθ(ə)n; (US) 'paiθɔn ]),是一种面向对象的解释性的计算机程序设计语言,也是一种功能强大而完善的通用 ...

  6. iOS 发布证书提示 此证书的签发者无效 解决办法

    1. 打开钥匙串  查看发布证书 都是提示 此证书的签发者无效   解决办法 : 2. 到了 第 4 步骤 再去 查看 发布证书 就会 显示  此证书有效 3.  如果还不可以 就 把 Apple W ...

  7. Python输入一个数字打印等腰三角形

    要求 用户输入一个数字,按照数字打印出等腰三角形 思路 1,用户输入的数字为n代表一共有多少行 2,使用一个循环带两个for循环,第一层循环是循环行数,第二层两个平行for循环一个打印空格一个打印*号 ...

  8. [刷题]算法竞赛入门经典(第2版) 5-15/UVa12333 - Revenge of Fibonacci

    题意:在前100000个Fibonacci(以下简称F)数字里,能否在这100000个F里找出以某些数字作为开头的F.要求找出下标最小的.没找到输出-1. 代码:(Accepted,0.250s) / ...

  9. window配置临时环境变量

    使用背景: 使用A电脑开发java程序或者运行java程序,但是A电脑上没有装JDK OR JRE.又不能污染A系统. 解决技巧:在windows系统中可以使用set命令配置临时环境变量.注:临时环境 ...

  10. H5水果机，一个网络版的lao hu ji

    该游戏为h5小游戏,纯属娱乐,技术探讨,相关技术在文章结尾,欢迎探讨交流 花了几天时间开发了这款水果lao hu ji,更新了几个版本,还有不足的地方,由于时间有限暂时没有继续更新新版本 未完成的功能 ...