Dojo1.11官方教程文档翻译（3.3）Dojo 事件

最新推荐文章于 2018-04-13 16:57:57 发布

taijiedi13

最新推荐文章于 2018-04-13 16:57:57 发布

阅读量554

点赞数

分类专栏： Web前端文章标签： dojo DOM事件 dojo-on dojo-topic

Web前端专栏收录该内容

55 篇文章 0 订阅

订阅专栏

3.3 Dojo事件

原文地址：https://dojotoolkit.org/documentation/tutorials/1.10/events/index.html
GitBook地址：https://www.gitbook.com/book/limeng1900/dojo1-11-tutorials-translation-in-chinese/details
转载请注明出处：http://blog.csdn.net/taijiedi13/ – 碎梦道

本教程中，我们将探索dojo/on以及Dojo如何更容易地连接DOM事件。我们也将探索Dojo的publish/subscribe框架：dojo/topic。

入门

你的许多JavaScript代码都用来为事件做准备：包括生成和相应新事件。就是说构建响应式、交互式web应用的关键就是创建高效的事件连接。事件连接可以让你的应用响应用户交互和等待动作的发生。Dojo中DOM事件的主力是dojo/on，下面一起来看如何使用这个模块。

DOM事件

你会问自己“DOM不是已经提供了一个机制来注册事件处理程序么？”答案是yes，但并不是所有的浏览器都遵循 W3C DOM 规范。在各种主流浏览器里主要有三种方式来注册事件处理器：addEventListener、attachEvent和 DOM 0。除此之外，还有两个不同的事件对象实现和至少一种 fires registered listeners in random order.aspx) and leaks memory.aspx)的浏览器引擎。Dojo改善了你使用DOM事件的方式，用一个名叫dojo/on的单一、直白的事件API将各种原生API标准化并阻止内存泄漏。
假设我们有以下标记：

<button id="myButton">Click me!</button>
<div id="myDiv">Hover over me!</div>

再想象一下，你想要在点击按钮的时候让div变成蓝色，鼠标经过时变为红色，完成悬停后变回白色。dojo/on很容易实现：

require(["dojo/on", "dojo/dom", "dojo/dom-style", "dojo/mouse", "dojo/domReady!"],
    function(on, dom, domStyle, mouse) {
        var myButton = dom.byId("myButton"),
            myDiv = dom.byId("myDiv");

        on(myButton, "click", function(evt){
            domStyle.set(myDiv, "backgroundColor", "blue");
        });
        on(myDiv, mouse.enter, function(evt){
            domStyle.set(myDiv, "backgroundColor", "red");
        });
        on(myDiv, mouse.leave, function(evt){
            domStyle.set(myDiv, "backgroundColor", "");
        });
});

注意也require了dojo/mouse。不是所有的浏览器原生支持mouseenter和mouseleave事件，所以用dojo/mouse来添加支持。你可以自己编写像dojo/mouse一样的模块来支持其他自定义事件类型。
这个例子阐述了常见模式： on(element,event name,handler)。或者换个说话就是某个元素上的某个事件连接某个处理器。该模式适用于全部的window、document、node、 form、mouse和keyboard事件。
注意和旧的dojo.connectAPI不一样，使用dojo/on模块时，事件名称的“on”前缀必须省略。
on方法不仅仅规范了事件注册的API，还规范了事件处理器的工作方式：

事件处理器总是按注册的顺序调用。
它们调用时都将一个事件对象作为第一个参数，
事件对象总是规范的包含常见W3C事件对象属性、类似target属性、一个stopPropagation方法和一个preventDefault方法。
就像DOM API，Dojo提供一个方法来移除一个事件处理器：_handle_.remove。on的返回值是一个带有remove方法的简单对象，调用该方法是将移除事件监听。例如，如果你想要一个一次性的事件，你就可以这么做：

var handle = on(myButton, "click", function(evt){
    // Remove this event using the handle
    handle.remove();

    // Do other stuff here that you only want to happen one time
    alert("This alert will only happen one time.");
});

顺便提下，dojo/on还有一个简便的方法：on.once。它接收和on一样的参数，但是会在它触发一次之后移除处理程序。
最后要说明的是：默认情况下，on将会在将节点传递为第一参数的上下文中运行事件处理器。例外是当它用来事件委托时，稍后就会讨论。

无论如何，你可以使用lang.hitch（来自dojo/_base/lang模块）来指定运行处理器的上下文。当使用对象方法时，hitch非常有用：

require(["dojo/on", "dojo/dom", "dojo/_base/lang", "dojo/domReady!"],
    function(on, dom, lang) {

        var myScopedButton1 = dom.byId("myScopedButton1"),
            myScopedButton2 = dom.byId("myScopedButton2"),
            myObject = {
                id: "myObject",
                onClick: function(evt){
                    alert("The scope of this handler is " + this.id);
                }
            };

        // This will alert "myScopedButton1"
        on(myScopedButton1, "click", myObject.onClick);
        // This will alert "myObject" rather than "myScopedButton2"
        on(myScopedButton2, "click", lang.hitch(myObject, "onClick"));

});

View Demo

不像它的前任dojo.connect，on不接受处理器作用域和方法参数。你需要为第三个参数使用lang.hitch，如果你希望保持执行语境。

NodeList事件

前面的教程提到过，NodeList提供一种多节点注册事件的方式：on方法。这个方法遵循dojo/on相同的模式，但没有第一个参数（由于NodeList的节点是你将要连接的对象）。

on方法包含在dojo/query里，所以你用NodeList.on时不需要专门requiredojo/on。
让我们看一个更高级的例子：

<button id="button1" class="clickMe">Click me</button>
<button id="button2" class="clickMeAlso">Click me also</button>
<button id="button3" class="clickMe">Click me too</button>
<button id="button4" class="clickMeAlso">Please click me</button>
<script>
require(["dojo/query", "dojo/_base/lang", "dojo/domReady!"],
    function(query, lang) {

        var myObject = {
            id: "myObject",
            onClick: function(evt){
                alert("The scope of this handler is " + this.id);
            }
        };
        query(".clickMe").on("click", myObject.onClick);
        query(".clickMeAlso").on("click", lang.hitch(myObject, "onClick"));

});
</script>

记住不同于NodeList.connect，NodeList.on方法并不返回NodeList，反之，它返回一个稍后可remove的on处理器的数组。这个数组也包含一个便利的最高阶remove方法，可以一次移除全部的监听器。

View Demo

事件委托

上面讨论过，NodeList的on方法可以很容易的把相同事件的同一处理器连接到多个DOM节点上。dojo/on也可以通过更高效的事件委托来实现这个。
事件委托背后的理念不是对每一个独立兴趣节点绑定一个事件监听，而是给一个节点在更高层面上单独附加一个监听器，它会检查捕获的事件的目标，看这些目标是否是从真实的兴趣节点冒泡来的，如果是则执行处理器逻辑。
以前这个可以（现在仍可以）通过dojox/NodeList/delegate来扩展NodeList。在1.10中就可以用dojo/on模块，语法是on(parent enement, "selector:event name ", handler)。
为了更好的说明，来看另一个基于和之前相同premise的例子：

<div id="parentDiv">
    <button id="button1" class="clickMe">Click me</button>
    <button id="button2" class="clickMe">Click me also</button>
    <button id="button3" class="clickMe">Click me too</button>
    <button id="button4" class="clickMe">Please click me</button>
</div>
<script>
require(["dojo/on", "dojo/dom", "dojo/query", "dojo/domReady!"],
    function(on, dom){

        var myObject = {
            id: "myObject",
            onClick: function(evt){
                alert("The scope of this handler is " + this.id);
            }
        };
        var div = dom.byId("parentDiv");
        on(div, ".clickMe:click", myObject.onClick);

});
</script>

请注意，我们也需要require dojo/query模块，虽然并不直接使用它。因为dojo/on需要dojo/query提供的选择器引擎来实现事件委托的选择器匹配。为了减少封装和避免不经常使用的特性困扰开发者，它没有被dojo/on自动引入。

View Demo

在运行上面的例子时，注意this仍然引用实际的兴趣节点，不是parentDiv节点。这是使用on进行事件委托的重要区别：this不再引用第一个参数传入的节点，而是选择器匹配的节点。这会非常有用。

对象方法

dojo/on的前任——dojo.connect曾经也可实现 function-to-function的事件连接。这个功能已经划分到了名叫dojo/aspect的资源。你很快会在后面的dojo/aspect的教程中看到。

Publish/Subscribe

目前为止的所有例子都是用已存在的对象作为一个事件生成器，当发生一些事情时注册的这个对象可以了解到。不过，如果你没有一个节点的处理器或者不知道是否创建了一个对象时应该怎么办？这里引入Dojo的发布和订阅（pub/sub）框架，它在1.10版本的dojo/topic模块里。你可以用pub/sub为“topic”（这是一个有趣的事件名称，可以有多种资源，表示为一个字符串）注册一个处理器（订阅）。
想象一下在我们正在开发的一个应用中，我们想要确保按钮会在用户的动作下弹出信息，不打算编写例行程序来弹出不止一次，但是也不想要一个在按钮上注册这个小程序的包装对象。这里可以使用pub/sub ：

<button id="alertButton">Alert the user</button>
<button id="createAlert">Create another alert button</button>

<script>
require(["dojo/on", "dojo/topic", "dojo/dom-construct", "dojo/dom", "dojo/domReady!"],
    function(on, topic, domConstruct, dom) {

        var alertButton = dom.byId("alertButton"),
            createAlert = dom.byId("createAlert");

        on(alertButton, "click", function() {
            // When this button is clicked,
            // publish to the "alertUser" topic
            topic.publish("alertUser", "I am alerting you.");
        });

        on(createAlert, "click", function(evt){
            // Create another button
            var anotherButton = domConstruct.create("button", {
                innerHTML: "Another alert button"
            }, createAlert, "after");

            // When the other button is clicked,
            // publish to the "alertUser" topic
            on(anotherButton, "click", function(evt){
                topic.publish("alertUser", "I am also alerting you.");
            });
        });

        // Register the alerting routine with the "alertUser" topic.
        topic.subscribe("alertUser", function(text){
            alert(text);
        });

});
</script>