Dojo 1.10学习笔记——Event

  • 事件授权(Event Delegation)

dojo/on模块:on(parent element,"selector:event name",handle)

注:需require 上dojo/query模块作为查询selector的引擎,dojo/on模块为减少内存占用就没有将不一定需要的dojo/query模块自动加载进来

<div id="parentDiv">
    <button id="button1" class="clickMe">Click me</button>
    <button id="button2" class="clickMe">Click me also</button>
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>

特性:this指向兴趣结点,此处即指selector,而非如一般情况指向第一个元素,即不是指向parent element

  • Topic  Publish/Subscirbe

给未创建的物件编写函数,

函数定义:topic.subscribe("user",function(a,b){})

物件调用函数:topic.publish("user",{a,b})

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

参考文档:http://dojotoolkit.org/documentation/tutorials/1.10/events/

时间: 2024-10-15 09:45:01

Dojo 1.10学习笔记——Event的相关文章

【Dojo 1.10】笔记3 等待DOM加载完成

有的web页面总是得等DOM加载完成才能继续执行功能,例如,待页面DOM加载完成后,才能在DIV上进行渲染图形. Dojo提供了这个功能的模块,叫domReady,但是由于它很特殊,就在结尾加了个叹号!. 1. 页面组织 这个例子很简单,就直接在script里写js代码了 html部分: <h1 id="greeting">Hello</h1> js部分(记得添加引用): <script src="https://cdn.bootcss.com/

Advanced Bash-Shell Guide(Version 10) 学习笔记一

我喜欢的一句话the only way to really learn scripting is to write scripts 学习脚本的唯一方法就是写脚本 更好的命令行参数检测    E_WRONGARGS=85 # Non-numerical argument (bad argument format).    41 #    42 # case "$1" in    43 # "" ) lines=50;;    44 # *[!0-9]*) echo &

JavaScript 学习笔记— —Event(二)

标准的事件绑定函数是 addEventListener 函数,而 IE 浏览器(IE9 以下)则是用 attachEvent. // 实现一个通用的,跨多种浏览器的时间绑定函数 function addEvent(el, type, fn) { if (window.addEventListener) { el.addEventListener(type, fn, false); } else if (window.attachEvent) { el.attachEvent('on' + typ

Direct3D 10学习笔记(一)——初始化

本篇将简单整理Direct3D 10的初始化,具体内容参照< Introduction to 3D Game Programming with DirectX 10>(中文版有汤毅翻译的电子书<DirectX 10 3D游戏编程入门>). Direct3D 10的初始化可分为以下几个步骤: 1.填充一个DXGI_SWAP_CHAIN_DESC结构体,用于描述了所要创建的交换链特性. 2.使用D3D10CreateDeviceAndSwapChain函数创建ID3D10Device设

Direct3D 10学习笔记(二)——计时器

本篇将简单整理Direct3D 10的计时器实现,具体内容参照< Introduction to 3D Game Programming with DirectX 10>(中文版有汤毅翻译的电子书<DirectX 10 3D游戏编程入门>). 1.高精度性能计数器 Direct3D10使用高精度性能计数器(精度达微秒级)实现精确时间测量,为了调用下面介绍的两个Win32计数器API,需要添加包含语句“#include <windows.h>” 1 BOOL QueryP

JavaScript 学习笔记— —Event(一)

Event代表事件状态,如事件发生的元素,键盘状态,鼠标位置和鼠标按钮状态.一旦事件发生,便会生成Event对象,如单击一个按钮,浏览器的内存中就产生相应的 event对象.event对象只在事件发生的过程中才有效.event的某些属性只对特定的事件有意义.比如,fromElement 和 toElement 属性只对 onmouseover 和 onmouseout 事件有意义. [event属性]:altKey, button, cancelBubble, clientX, clientY,

Direct3D 10学习笔记(三)——文本输出

本篇将简单整理Direct3D 10的文本输出的实现,具体内容参照< Introduction to 3D Game Programming with DirectX 10>(中文版有汤毅翻译的电子书<DirectX 10 3D游戏编程入门>). 1.填充D3DX10_FONT_DESC结构体 D3DX库提供了用于显示文本的ID3DX10Font接口.而要获取一个指向ID3DX10Font对象的指针,需要先填充一个D3DX10_FONT_DESC结构体,该结构体用于描述所创建的字体

Advanced Bash-Shell Guide(Version 10) 学习笔记二

变量替换$variable 是 ${variable}的简写    39 hello="A B C D"    40 echo $hello # A B C D    41 echo "$hello" # A B C D    引号保留变量里面的空白        1 echo "$uninitialized" # (blank line)    2 let "uninitialized += 5" # Add 5 to it

Advanced Bash-Shell Guide(Version 10) 学习笔记三

书上的脚本比较多 记录比较有用的脚本 更好的方式检查命令行参数是否为数字 40 # E_WRONGARGS=85 # Non-numerical argument (bad argument format). 41 # 42 # case "$1" in 43 # "" ) lines=50;; 44 # *[!0-9]*) echo "Usage: `basename $0` lines-to-cleanup"; 45 # exit $E_WR