Dojo学习--event(2): 事件指派和对象方法

继续学习Dojo的事件机制：

事件指派（Event Delegation）

NodeList 的on函数可以给一串DOM节点赋值handler事件处理函数。dojo/on也通过事件指派来实现这个功能

事件指派的意思：
不对每一个DOM元素都指定事件处理函数，而是给DOM树中尽量最高级别的元素上指定一个事件处理函数。按照事件冒泡原理，低级别的DOM元素的事件会传递到高级别DOM元素上。这个高级别的DOM元素会检查捕获到的事件，只要判断传递来的事件的属于哪个子元素，然后去做相应的子元素的处理。

事件指派的好处是：
1，减少事件处理程序的数量，提升页面的性能：每个函数都是对象，都会占用内存，所以事件处理程序的数量关系到整个页面的运行性能。
2，减少对DOM元素的访问次数：每个定义的事件处理程序都会绑定到DOM元素上，也就有对DOM元素的访问。减少事件处理程序的数量，一定程度上减少对DOM元素的访问。

适合事件指派的事件：
适合采用事件指派技术的事件包括click,mousedown,mousup,keydown,keyup,keypress。虽然mouSEOver和mouSEOut事件也冒泡，但是处理它们并不容易，而且经常需要计算它们的位置。

之前的dojo版本dojox/Nodelist/delegate 会实现这个事件委托，现在依然有用。1.10版本开始，也可以用dojo/on 模块来实现相关功能,使用on函数语法：

**on(parent element,"selector:event name",handler)**

例子如下：

<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>

查看运行结果： 事件指派例子–运行结果
注意：1，使用中，仍然需要dojo/query模块，即使我们不会直接使用到模块功能。因为 dojo/on需要dojo/query的选择引擎去匹配dom元素而指派事件。
2，上述例子也能说明一个问题，事件指派设计中，事件处理关注并不是高级别元素（也可以称之为父级元素），虽然这个元素作为第一个参数传递到on中。事件指派的处理函数关注的是处理匹配的子元素的操作。

对象方法

dojo/on的“前任”dojo.connect,负责方法到方法的事件链接。这个功能已经单独成一个模块：dojo/aspect.

Publish/Subscribe

之前的例子处理的情况是：已知一个对象以及已知其要做event处理。但是，如果在你不知道一个节点对象要处理什么event的时候（也许可以理这个理解：只知道这个节点要进行和某个已知对象的event操作一样，至于具体事件处理程序不知道），或者甚至不知道何时这个对象会被创建。这种情况下，你需要Dojo 的dojo/topic模块的publish与subscribe (pub/sub)。

这个框架是1.10开始引入。Pub/sub允许注册一个处理函数handler（通过subscribe） 到一个 topic，这个topic其实是事件别名的string形式。这个事件可以拥有多种资源，被多个节点使用。当这个topic被publish时handler会被调用。

pub/sub适用场景：
当你开发一个应用时，希望有个按钮去提现用户操作。我们不想重复开发，这个小功能又不值得包装成对象。

通过以下例子更深一步理解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",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,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,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>

查看运行结果：对象事件例子–运行结果

这种模式的事件写法使得事件处理与事件对象解耦，这样有一个优点：不需要创建DOM元素，就可以进行单元。若不想再保持一个主题，topic.subscribe返回一个对象，这个对象有一个remove方法，这个方法可以移除相应事件处理（与on函数类似）。

注意： 不同于dojo.publish，topic.publish参数不需要写成数组形式。以下两种写法是相等的，注意参数的不同写法：

topic.publish("someTopic","foo","bar") 
dojo.publish("someTopic",["foo","bar"]).

Dojo事件总结

dojo事件机制很强大，也很容易使用。on方法屏蔽了浏览器之前的不一致。pub/sub框架中，dojo/topic给出了一种解绑事件处理程序与事件对象的方法。需要多花时间去熟悉这些工具，相信在web应用的构建中还是很有益处的。

（编辑：李大同）

【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容!