Dojo 学习--event(1) dojo/on与Nodelist on方法

这节了解怎么通过dojo在DOM元素上来绑定事件。

原生DOM Event

DOM元素的原始事件处理函数包括addEventListener ，attachEvent, DOM0(有待学习)
attachEvent是IE的方法，FF及其他使用addEventListener 。
使用Dojo的DOM event，可以屏蔽各种native API之间的不同，避免内存泄露，以单一直接的方式处理event。Dojo的event API 是dojo/on

官网Dojo event例子

官网关于本节内容的地址：
http://dojotoolkit.org/documentation/tutorials/1.10/events/index.html

例子详情：

html页面有两个DOM元素

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

以下代码实现：当点击button的时候，div颜色变为blue。当鼠标移到div上时变红。鼠标移开时div由黑变为白色

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", "");
        });
});

例子中引入了dojo/mouse。因为并不是所有原生浏览器都支持mouseenter 和mouseleave，引入dojo/mouse可以忽略浏览器来使进行鼠标的各项操作。

dojo/on的使用形式形式

on(element,event name,handler).
对所有的window, document, node, form, mouse, and keyboard 事件都有效.

另外一种dojo事件调用方式：dojo.connect
dojo.connect(element,event,handler)

注意：上面两种方式不同点，dojo.connect的event需要带on, 写成“onclick”的形式，dojo/on是要写成“click”不带on。

Dojo也提供了事件消除处理，on(…)的返回值是一个object,这个object有一个remove方法，调用之后可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.");
});

BTW, dojo/on 有一个很便捷的方法:on.once，实现以上相同功能。on.once和dojo/on的参数是一样的，on.once执行一次后，自动去除handler。

dojo/on只能在DOM元素的上下文中运行handler，有另外方法： hitch (属于dojo/_base/lang 模块) 能够指定事件运行的上下文。这对于对象化的方法来说是很有用的。

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"));

});

Nodelist 事件

NodeList事件是将事件绑定到多个node节点上，使用的是属于dojo/query模块的on方法，这个on方法与dojo/on方法类似。但是Nodelist模式下的on方式是没有第一个参数，Nodelist的node充当了第一个参数。

这个on方法是属于dojo/query。所以不用加载dojo/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的。同样的，这个数组也包括了一个最高级别的remove方法，可以一次删除所有事件监听。