前言：

上一章详解了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. 五十行javascript代码实现简单的双向数据绑定

    五十行javascript代码实现简单的双向数据绑定 Vue框架想必从事前端开发的同学都使用过,它的双向数据绑定机制能给我们带来很大的方便.今天闲着没事,尝试着实现一下双向数据绑定,接下来给大家分享一 ...

  2. MAC系统操作指令汇总

    OSX 的文件系统 OSX 采用的Unix文件系统,所有文件都挂在跟目录 / 下面,所以不在要有Windows 下的盘符概念. 你在桌面上看到的硬盘都挂在 /Volumes 下. 比如接上个叫做 US ...

  3. iOS开发 - Swift实现清除缓存功能

    前言: 开发移动应用时,请求网络资源是再常见不过的功能.如果每次都去请求,不但浪费时间,用户体验也会变差,所以移动应用都会做离线缓存处理,其中已图片缓存最为常见. 但是时间长了,离线缓存会占用大量的手 ...

  4. jQuery 对页面元素的搜索包括父元素、同辈元素、子元素的搜索

    1.父元素搜索 (1)parents([selector]) 方法 $("p").parents().css("border","1px solid ...

  5. MySQL存储过程_创建-调用

    阅读目录:MySQL存储过程_创建-调用-参数 存储过程:SQL中的"脚本" 创建存储过程 调用存储过程 存储过程体 语句块标签 存储过程的参数 in:向过程里传参 out:过程向 ...

  6. jade模板引擎简明用法

    ①.特性 首个单词为标签,有一些不能识别的标签可作为code,如each for case if  else if unless   zen coding风格添加标签,如 .nb#hello 生成 & ...

  7. kafka java使用

    首先添加maven依赖 Kafka <dependency> <groupId>org.apache.kafka</groupId> <artifactId& ...

  8. 2017云计算开源峰会 你是想听Linux谈开源还是想听OpenStack谈开源？

    2017年,善于把握机遇的企业们不是正在开源,就是走在去开源的路上-- 开源是不是就意味着免费? 开源企业就是要当"活雷锋"? 开源项目究竟如何运作?如何参与开源社区? 如何获得最 ...

  9. oracle的神奇化学反应（行转列+获取表字段）

    橘子+汽水=橘子汽水,∑(ﾟДﾟノ)ノ好无聊!!! 火鸡+烤架=烤火鸡,ლ(´ڡ`ლ)还不错. wm_concat()+表字段查询=(✪ω✪)会是啥呢? wm_concat()函数,该函数可以把列值以 ...

  10. Docker - 容器直连

    本文是在原文基础上的实际操作验证记录和细节补充. 默认情况下,容器连接到虚拟网桥docker0提供的虚拟子网中,容器之间通过默认网关(虚拟网桥docker0接口地址)建立连接. 如果不使用虚拟网桥,用 ...