Dojo 事件<10>
发布时间:2020-12-16 21:30:33 所属栏目:百科 来源:网络整理
导读:在这个教程里,我们将解释 dojo/on 以及如何使用它来监听DOM事件。 我们也会讲解 Dojo的 publish/subscribe框加: dojo/topic. 开始 许多Javascript 代码用于处理事件:响应一个件事或者产生一个新的事件。交互式web应用程序创建有效的事件连接,关键在于建
在这个教程里,我们将解释 dojo/on 以及如何使用它来监听DOM事件。 我们也会讲解 Dojo的 publish/subscribe框加: dojo/topic. 开始
许多Javascript 代码用于处理事件:响应一个件事或者产生一个新的事件。交互式web应用程序创建有效的事件连接,关键在于建立响应。事件连件允许你的应用响应用户的交互并且等待动作的发生。 Dojo的主要DOM事件处理器是通过dojo/on完成。 接下来让我告诉你如何使用这个模块!
DOM事件
你可能会问自己, “DOM是否已经提供了一个注册事件处理的机制?" ,文档对象模型本身是提供了事件处理,但不是所有的浏览器都遵循W3C的DOM规范。主流的三种处理事件方式: addEventListener,attachEvent,和 DOM 0. 除此以外,这里还有两种不同的事件对象实现 和至少一个在随机的顺序下触发监听事件和内存泄露的浏览器引擎。你只需简单的使用dojo/on模块就可以处理所有问题,不用考虑各种不同的原生API以及防止内存的工作。
让我们看看下面的HTML标记:
<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,"red"); }); on(myDiv,mouse.leave,""); }); }); !* 注间 dojo/mouse资源是必须要的。 不是所有的浏览器都本地支持mouseenter和mouseleave 事件, 所以需要添加dojo/mouse. 可以自己像dojo/mouse一样创建自己的模块,以支持其它自定义事件类型。
这个例子说明了常见的模式: on(element,event name,handler). 或换句话说, 发现在这个元素的这个事件,连接到这个处理程序上。 这种模式可以应用到所有的窗口,文档, 节点,form, 鼠标, 和键盘事件上。
!* 注意,不像老的dojo.connect API,当使用dojo/on模块时, "on" 事件名称的前缀(onClick中的on)必须被省略。
on 方法不仅权能使用注册事件API正规化。它使用处理事件也正规化:
类似于DOM API,Dojo 也提供了移除事件监听器的方法: handle.remove. on方法返回的对象会用于remove方法。如果你想一个监听器只使用一次,可以如下所示:
var handle = on(myButton,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 将会在第一个被传入的参数(节点)上下文里运行 事件处理函数。 除非on 使用了事件委托,之后会讨论什么是事件委托。
但是,你可以使用lang.hitch(dojo/_base/lang模块)来指名事件处理程序的运行上下文。 勾子在对象方法里非常有用。
require(["dojo/on","dojo/_base/lang",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,myObject.onClick); // This will alert "myObject" rather than "myScopedButton2" on(myScopedButton2,lang.hitch(myObject,"onClick")); }); 查看示例
!* 不像on 的前任, dojo.connect. on 不在接受监听器的作用和方法参数。 如果你想要保留执行上下文,你需要在第三个参数中使用lang.hitch.
节点列表事件
在上个教程(dojo/query)提到过的, NodeList 提供了给多个节点注册事件的方法 - on 方法。 这个方法除了第一个参数跟dojo/on不一样外,其它的都是一样。
!* dojo/query 包含了 on方法, 所以你不需要在加载dojo/on模块来使用NodeList.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",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","onClick")); }); </script>!* 注意,不像NodeList.connect,NodeList.on方法不会为了链式调用而返回NodeList对象。 代替的是它返回一个监听器数组,之后可以被移除。 这个数组包含一个数组级的remove方法(相对于遍历每个元素,在remove) 它可以一次移除所有的监听器。
查看Demo
事件委托
如上面的讨论, NodeList的on方法可以给多个DOM节点的相同事件连接相同的处理函数。 dojo/on也可以通过更加有效的事件委托机制,完成相同的任务。
事件委托的原理是把原先给每个自己感兴趣的节点注册监听器,改为给它们的更高一级的节点注册一个监听器。 之后可以检查它捕获的事件,是否是你感觉的实际节点触发(冒泡到父节点)。 如果是, 监听器的代码会被执行。
以前,它是(现在依然是)通过dojox/NodeList/delegate扩展到NodeList. 在1.9,它也可以dojo/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/query",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> !*注意, 我们虽然没有直接使用到dojo/query 模块,但也加载了它, 这是因为dojo/on为了事件委托中能够使用选择器,所以需要用到dojo/query的选择器引擎。 dojo/on不会自动加载dojo/query,是为了开发者在不需要这个功能时,不需额外加载dojo/query模块。
查看Demo
当运行上面的 Demo,注意到 this 依然会引用实际的节点,而不是parentDiv(父节点)。 当为事件委托使用on 和一般注册监听器使用on,有一个最要的区别: this 不在引用第一个被传入的参数的节点, 而是 选择器匹配到的节点。
对象方法(面向方面编程)
dojo/on的前任, dojo.connect,可以处理函数到函数的事件连接。 这个功能已经单独到 dojo/aspect。 期待不久出的dojo/aspect教程
发布与订阅
到目前为此,上面的例子都是给已知的对象(节点)注册已知的事件。 但是如果你不知道给节点注册什么事件或者 事件源对像还没有创建时,该怎么做? 这里需要使用到Dojo的 publish 和 subscribe(pub/sub)框架, 1.9采用dojo/topic模块。 Pub/sub允许你给一个"topic" (设想的一个事件,可以有多个事件源,为一个字符串)注册一个监听器。 这个监听器会在topic被发布时调用。
让我们想下一个正在开发的应用, 我们想某个按纽提示用户的一个行为。 我们不想一次又一次的写提示这个功能, 但我们又不想给 button注册一个包装对象(定义一个对象,如上面的例子)。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",topic,domConstruct,dom) { var alertButton = dom.byId("alertButton"),createAlert = dom.byId("createAlert"); on(alertButton,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> 查看 Demo
使用这种事件模式的优势在于, 我们的应用程序在单元测试时可以不需要创建DOM 对象。 例行程序(监听器的代码) 可以跟 事件的生产者解偶。
如果你不在想接收到一个topic的通知, topic.subscribe会返回一个对象, 这个对像中的remove方法可以删除掉监听器。(如同dojo/on).
!* 注意不像dojo.publish,topic publish 不在接受一个数组。 例如 topic.publish("someTopic","foo","bar") 等于 dojo.publish("someTopic",["foo","bar"]).
总结
Dojo的事件系统非常强大, 而使用时又非常简单。 on方法正常化了DOM事件在浏览器的不同。 Dojo的 pub/sub框架, dojo/topic, 为开发者提供了对事件处理和事件源更好的解偶提供了方法。 花更多的时间来了解这些工具,有利于创建更好的web应用程序。
(编辑:李大同) 【声明】本站内容均来自网络,其相关言论仅代表作者个人观点,不代表本站立场。若无意侵犯到您的权利,请及时与联系站长删除相关内容! |